用户往往需要根据每个用户的不同权限来显示不同的菜单
之前我做过通过后台的权限动态生成router对象，比较麻烦
这里，我们可以通过增加一个menu的属性，
这个属性后台返回的权限列表来展现不同的菜单和按钮
这个是我的一个router的配置
{ path: 'role', name: '权限管理', component: _import('user/role'), meta: {title: '权限管理', icon: 'password'}, menu: 'role' },这里多了一个meun属性，而我后台返回的权限JSON格式：{"userPermission":{"menuList":["role","org","busmanager","user","article"],"roleId":1,"nickname":"超级用户","roleName":"管理员","permissionList":["user:list","user:add","role:update","article:add","org:list","org:add","user:update","org:update","role:add"]
通过上面的menu属性来过滤，判断菜单是否显示
function filterAsyncRouter(asyncRouterMap, menus) { const accessedRouters = asyncRouterMap.filter(route => { //filter,js语法里数组的过滤筛选方法 if (hasPermission(menus, route)) { if (route.children && route.children.length) { //如果这个路由下面还有下一级的话,就递归调用 route.children = filterAsyncRouter(route.children, menus) //如果过滤一圈后,没有子元素了,这个父级菜单就也不显示了 return (route.children && route.children.length) } return true } return false }) return accessedRouters }通过这种方法，可以隐藏掉没有权限的菜单，
按钮的话，可以通过下面来控制它显示
function hasPermission(permission) { let myPermissions = store.getters.permissions; return myPermissions.indexOf(permission) > -1; } <el-button type="primary" icon="plus" v-if="hasPermission('org:add')" @click="showCreate">添加 </el-getton>之前我也遇到一个刷新页面，路由数据消失，这里可以给你一个思路。
下面红色这段，刷新后会执行路由的钩子函数，里面判断你的store.getters.role
如果为空，并你的路径不是登陆路径，则重新取用户信息，初始你的路由和个人信息
这样，你刷新后页面的信息还是一样。
router.beforeEach((to, from, next) => { NProgress.start() if (getToken()) { //如果已经登录 if (to.path === '/login') { next({path: '/'}) NProgress.done() // 结束Progress } else if (!store.getters.role) { store.dispatch('GetInfo').then(() => { next({...to}) }) } else { next() } } else if (whiteList.indexOf(to.path) !== -1) { //如果前往的路径是白名单内的,就可以直接前往 next() } else { //如果路径不是白名单内的,而且又没有登录,就跳转登录页面 next('/login') NProgress.done() // 结束Progress } })