Javascript 如何使用路由器在VueJS中进行路由？

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

以下是我的main.js文件：

从“Vue”导入Vue
从“./App.vue”导入应用程序
从“./About.vue”导入关于
导入“bootstrap/dist/css/bootstrap.css”
导入“bootstrap vue/dist/bootstrap vue.css”
从“bootstrap vue”导入{BootstrapVue，IconsPlugin}
从“@okta/okta vue”导入身份验证
从“vue路由器”导入VueRouter
从“cors”导入cors
常量路由器=新的VueRouter({
模式：“历史”，
路线：[
{path:'/implicit/callback'，组件：Auth.handleCallback（）}，
{路径：'/about'，组件：about}，
]
})
Vue.use（认证{
发行人：'https://dev-REDACTED.okta.com/oauth2/default',
clientId:“修订版”，
重定向URI:'http://localhost:8080/implicit/callback“，//处理来自Okta的响应并存储返回的令牌。
作用域：['openid'，'profile'，'email']，
pkce：是的
})
Vue.config.productionTip=false
//安装BootstrapVue
Vue.use（BootstrapVue）
//（可选）安装BootstrapVue图标组件插件
Vue.use（IconsPlugin）
Vue.use（VueRouter）
Vue.use（cors）
新Vue({
路由器，
渲染：h=>h（应用程序），
}).$mount（“#应用程序”）

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

家
关于
注销
登录
从“./components/AppCatLogHome.vue”导入AppCatLogHome
导出默认值{
名称：“应用程序”，
组件：{
AppCatLogHome
},
数据：函数（）{
返回{
认证：假
}
},
创建（）{
这是经过身份验证的（）
},
观察：{
//每次路由更改时，请检查身份验证状态
“$route”：“isAuthenticated”
},
方法：{
异步未验证（）{
this.authenticated=等待此消息。$auth.isAuthenticated（）
},
登录（）{
这是。$auth.loginDirect（'/'））
},
异步注销（）{
等待此消息。$auth.logout（）
等待此消息。我已验证（）
//导航回家
这是.$router.push（{path:'/'}）
}
}
}
#应用程序{
字体系列：Avenir、Helvetica、Arial、无衬线字体；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
文本对齐：居中；
颜色：#2c3e50；
边缘顶部：60像素；
}

My About.vue组件包含：

您好，这是About.vue页面

导出默认值{
姓名：“关于”
}
组件位于
App.vue
的主视图中（根
所在位置），因此该组件将显示在所有视图中

您可以通过创建“主”视图并将
移动到该视图中来解决此问题：




家
关于
注销
登录

然后，为
Home
设置默认路由：

//main.js
从“@/views/Home.vue”导入主页
const router=新的Vuex.路由器({
路线：[
{path:'/'，组件：Home}，
{路径：'/about'，组件：about}，
//...
]
})
顺便说一句，阅读要比在这里发布快得多……这样做是因为我的Okta Oauth工作流依赖性，所以我在这里发布。