• 主要是用render渲染函数

在路由配置文件中使用该组件，判断渲染哪一个页面

// right.jsimport 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页面的相关标识')    }  ]})