vue高級組件之路由權限組件

• 主要是用render渲染函數

在路由配置文件中使用該組件，判斷渲染哪個頁面

// right.js
import haveNoRight from './haveNoRight';
export default (Comp, rightType) => ({
    components: {
        Comp,
        haveNoRight,
      },
    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頁面的相關標識')
    }
  ]
})