vue高级组件之路由权限组件

2019独角兽企业重金招聘Python工程师标准>>>

• 主要是用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页面的相关标识')
    }
  ]
})

转载于:https://my.oschina.net/u/3407699/blog/3049129