对于不同角色显示不同的菜单

思路1：

　　本地放一份完整的菜单数据，通过后台返回角色的菜单列表两者对比，筛选需要显示的菜单数据绑定，这里有个问题就是路由vue实例初始化就生成了，加载的全部，人为输入地址是可以访问到角色权限以外的数据，所以还要加路由构子router.beforeEach()去做判断哪些是角色权限以内的路由。这种思路的比较复杂，逻辑比较多

思路2：

　　利用Vue Router官方API提供的router.addRoutes()方法动态添加路由来实现

本章按思路2来实现该功能

1.初始化路由组件先定义出来，比如404、login组件

import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export default new Router({  routes: [    {      path: '/login',      name: 'login',      component: () => import('@//components/login')    },    {      path: '*',      name: '404',      component: () => import('@//components/404')    }  ]})

2.login组件

登录时从后台得到菜单数据navData和路由数据routerData把它存进sessionStorage防止刷新页面时丢失，引入vuex的this.add_Router()触发

3.vuex

import {ADD_ROUTES} from './mutations_type'import Menufilter from './menufilter'import router from '../router'const addRoutes = {  state: {    routeData: []  },  mutations: {    [ADD_ROUTES](state, addrouter) {      let routes = []      Menufilter(routes, addrouter) // 将后台的路由数据components转化成组件      router.addRoutes(routes)  // 添加路由      router.push('/')    }  },  actions: {    add_Routes({commit}, addrouter) {      commit(ADD_ROUTES, addrouter)    }  }}export default addRoutes

login组件的this.add_Router触发mutations里的ADD_ROUTES，ADD_ROUTES会做如下:

1. Menufilter(route, addrouter)会处理后台返回的路由数据,因为后台返回的数据中的components对应的是字符串应该把它转化成组件

import {lazy} from './lazyLoading'export default (routers,data) => {  //要重新遍历一下，是因为，通常我们动态路由的时候，  //是获取服务端数据，这个component属性是一个字符串转化成组件  generaMenu(routers,data)}function generaMenu(routers,data){  data.forEach((item)=>{    let menu = Object.assign({},item)    menu.component = lazy(menu.component)    if(item.children){      menu.children = []      generaMenu(menu.children,item.children)    }    routers.push(menu)  })}

// 懒加载组件lazyfunction lazy(name) {  let file = name.split('_')[0]  if (name !== 'dashboard') {    return () => import(`@/page/${file}/${name}.vue`)  } else {    return () => import(`@/components/${name}.vue`)  }}export {lazy}

2. 调用router.addRouter(routes)动态添加路由

为了防止用户手动刷新页面还要在main.js重新触发vuex里的add_Routes方法添加路由

import Vue from 'vue'import App from './App'import router from './router'import Element from 'element-ui'import store from './store/store'import 'element-ui/lib/theme-chalk/index.css'import api from './api/api'Vue.config.productionTip = falseVue.prototype.$api = apiVue.use(Element)// 用户手动刷新页面，这是路由会被重设，要重新新增if (sessionStorage.getItem('user')) {  let routes = JSON.parse(sessionStorage.getItem('routes'))  store.dispatch("add_Routes", routes)}// 登录状态判断router.beforeEach((to, from , next) => {  if (!sessionStorage.getItem('user') && to.path !== '/login') {    next({      path: '/login',      query: {redirect: to.fullPath}    })  } else {    next()  }})new Vue({  el: '#app',  store,  router,  components: { App },  template: '
     '})

以上即可实现简单的权限菜单