javascript - 如何使用路由器在 VueJS 中路由？

Question

我遵循了一个使用 VueJS 的 Okta OAuth 教程。我有一个默认页面，显示“App.vue”组件，然后在单击“/about”路由时显示“About.vue”组件。但是，当单击“关于”链接时，我还会在 About.vue 组件下方看到来自 App.vue 组件的组件。我不确定为什么我仍然在“/about”路由中看到我的 App.vue 组件。

以下是我的 main.js 文件：

import Vue from 'vue'
import App from './App.vue'
import About from './About.vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'


import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import Auth from '@okta/okta-vue'
import VueRouter from 'vue-router'
import cors from 'cors'

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/implicit/callback', component: Auth.handleCallback() },
    { path: '/about', component: About },
  ]
})

Vue.use(Auth, {
  issuer: 'https://dev-REDACTED.okta.com/oauth2/default',
  clientId: 'REDACTED',
  redirectUri: 'http://localhost:8080/implicit/callback', // Handle the response from Okta and store the returned tokens.
  scopes: ['openid', 'profile', 'email'],
  pkce: true 
})


Vue.config.productionTip = false
//Install BootstrapVue
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)

Vue.use(VueRouter)
Vue.use(cors)

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

我的 App.vue 组件包含以下内容：

<template>
  <div id="app">
    <router-link to="/" tag="button" id='home-button'> Home </router-link>
    <router-link to="/about">About</router-link>
    <button v-if='authenticated' v-on:click='logout' id='logout-button'> Logout </button>
    <button v-else v-on:click='login' id='login-button'> Login </button>
    <router-view/>
    <app-cat-log-home msg="posts"/>   
  </div>
</template>

<script>
import AppCatLogHome from './components/AppCatLogHome.vue'


export default {
  name: 'App',
  components: {  
    AppCatLogHome
  },
   data: function () {
    return {
      authenticated: false
    }
  },
  created () {
    this.isAuthenticated()
  },
  watch: {
    // Everytime the route changes, check for auth status
    '$route': 'isAuthenticated'
  },
  methods: {
    async isAuthenticated () {
      this.authenticated = await this.$auth.isAuthenticated()
    },
    login () {
      this.$auth.loginRedirect('/')
    },
    async logout () {
      await this.$auth.logout()
      await this.isAuthenticated()

      // Navigate back to home
      this.$router.push({ path: '/' })
    }
  }

}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

我的 About.vue 组件包含：

<template>
  <div id="about">
    <p>Hello this is the About.vue page</p>
  </div>
</template>

<script>
export default {
  name: 'About'
}
</script>

标签： javascriptvue.jsvue-router

Answer 1

该<app-cat-log-home>组件位于您的主视图中App.vue（根所在的位置<router-view>），因此该组件将显示在所有视图中。

您可以通过创建“主页”视图并<app-cat-log-home>进入该视图来解决此问题：

<!-- Home.vue -->
<template>
  <div>
    <app-cat-log-home msg="posts"/>   
  </div>
</template>

<!-- App.vue -->
<template>
  <div id="app">
    <router-link to="/" tag="button" id='home-button'> Home </router-link>
    <router-link to="/about">About</router-link>
    <button v-if='authenticated' v-on:click='logout' id='logout-button'> Logout </button>
    <button v-else v-on:click='login' id='login-button'> Login </button>

    <router-view/>

    <!-- Moved into Home.vue -->
    <!-- <app-cat-log-home msg="posts"/> -->
  </div>
</template>

然后，设置默认路由Home：

// main.js
import Home from '@/views/Home.vue'

const router = new Vuex.Router({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    //...
  ]
})