当多个页面具有相同的页面模板时,想要共同同一个组件,有两种方法实现。
方法一
1.app.vue中 必须加上key属性,让每次进入路由时都重新触发钩子函数
<router-view :key="key" />
computed: {
key() {
// 只要保证 key 唯一性就可以了,保证不同页面的 key 不相同
// console.log(this.$route.fullPath);
return this.$route.fullPath
}
},
2.在index.js文件中: 让多个路由共同同一个组件,保证path和name属性具有唯一性 。
{
path: '/role',
name: 'role', //角色
meta: {
requireAuth: true //表示该路由需要登录验证后才能进入 在切换路径跳转路由之前作判断
},
component: () =>
import('@/views/policy/policy.vue'),
},
{
path: '/strategy',
name: 'strategy', //策略
meta: {
requireAuth: true