vue 不同权限显示不同页面

新手上路。项目需求比较简单，不要求控制到按钮，只需控制到页面，有权限显示，没有权限不显示该页面。

网上很多方法，看的好几脸懵逼，不确定用什么方法。直到搜到以下demo，有了demo赶脚拥有了上帝视角，在此基础上改成自己适用的。

1.基于Vue实现后台系统权限控制这是个比较华丽的demo，但是对于我来说页面很多，反而很难提取到某个功能关键代码。
2.Vue动态菜单(路由)的实现方案(beforeEach+addRoutes+elementUI)这个简单易懂。

看代码还是容易的，就不贴我的实现了，记录下主要步骤：
1.最重要的就是本地路由表了
meta下的roles属性控制了是否在菜单中显示该页面，这个demo中用的是用户角色，我的项目中没有分配角色，后端返回给我有权限的菜单list，因此我的roles属性直接填写菜单名称即可匹配。
跳转，显示很多都读取这个文件内容。根据自己情况增删属性

//代码位置：router/index.js
 {
    path: '',
    component: layout, //整体页面的布局(包含左侧菜单跟主内容区域)
    children: [{
      path: 'main',
      component: main,
      meta: {
        title: '首页', //菜单名称
        roles: ['user', 'admin'], //当前菜单哪些角色可以看到 （我的这里改为菜单名称）
        icon: 'el-icon-info' //菜单左侧的icon图标
      }
    }]
  }

2.向上面roles中塞数据
用到了localStorage，我理解为全局变量，我的这篇博客 1.2有写

登录后，拿到权限存到变量中

let getUserRole = this.formModel.user === 'admin' ? 'admin' : 'user'
      localStorage.setItem('userRole', getUserRole)

//代码位置：src/permission.js
  // 取到用户的角色
  let GetRole = localStorage.getItem("userRole")
  //。。。demo中有，去掉一些逻辑，只展示如何添加到roles
      // 4.将生成好的路由addRoutes
      router.addRoutes(fixedRouter.concat(getRoutes))

这里roles已经有值了，这两步是最重要的，可以实现过滤。剩下就是渲染菜单的组件sideMeuns.vue重新生成左侧菜单。
菜单中显示也是通过读取路由数据，router/index.js中要调成自己合适的结构。

demo中我修改的地方：
1.左侧菜单是通过router-link组件跳转的，加上背景色，会有紫色下划线，感觉很丑。在父组件menu中加上router也可跳转。

2.如果菜单下只有一个子菜单时，就不显示它的父菜单了。不符合我的业务需求
一级菜单也需要显示主菜单，添加以下代码。