- 主要是用render渲染函数
在路由配置文件中使用该组件,判断渲染哪一个页面
// right.js
import haveNoRight from './haveNoRight';
export default (Comp, rightType) => ({
components: {
Comp,
no,
},
computed: {
hasRight() {
// 再登录完成后,一般会获取到该用户的权限菜单数组,将其存到state中
const rightList = this.$store.state.menuList;
return rightList.includes(rightType);
}
},
render(h) {
return this.hasRight ? h(Comp, {}) : h(haveNoRight, {});
}
})
- 使用案例:
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import right from '../components/right';
const a = () => import('../components/a')
const b = () => import('../components/b')
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/a',
name: 'a',
component: right(a, 'a页面的相关标识')
},
{
path: '/b',
name: 'b',
component: right(b, 'b页面的相关标识')
}
]
})