• 主要是用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頁面的相關標識')