vuex+element 从后台获取数据写导航栏-菜单权限

主要用到 vuex、router.beforeEach、router.addRoutes()。vuex 的使用方法可以看我的另一篇博客：vue笔记（四）vuex。

顺便安利一个 在线视频转gif图。

因为第一次用到 router.addRoutes()，在做这个需求的时候遇到了很多问题，这里给大家几个链接，如果碰到了可以点击查看：
1. import 加载组件失败： import() 动态加载component组件失败 ；

2. 路由显示结果正确，但是页面总是跳转到 404 页面： vue 路由权限 页面刷新时报404问题；

3. 每次进入页面时，总是报 name 重复的警告：掘金上的 “luichooy”发表的 vue-router之addRoutes使用遇到的坑，这篇文章对 addRoutes 如何产生这个问题解释挺详细的，但是代码不够详细，我是参考了“学如逆水，不进则退”写的 解决addRoutes后重新登录路由重复警告问题 解决的。

---

使用vuex 写导航栏

在写静态导航栏时通常会新建一个文件作为组件，数据则是由 this.$router.options.routes 获取。现在我们的路由信息不是从 router 中获取到的，而是从后台获取的，我们暂时先把获取到的这个数据 命名为 menuList，存放在 vuex 中的 state 中。具体代码如下：

思路：

1. 在 state 中定义一个初始变量 menuList: []，在 actions 中处理请求数据，在 mutations 中将请求到的数据赋值给 state 中的 menuList。
2. 在组件中获取 state 中处理好的数据。使用 mapGetters 。
3. 由于刷新地址，vuex 中的数据会恢复成初始值，使用 router.beforeEach 进行监听，若地址刷新，重新请求数据，使用 $store.dispatch()；

1. 登录成功后，发起菜单请求

login(){
   
   
  let userInfo = {
   
   
    token: "ERRR",
    userCode: "admin",
    userAccount: "管理员"
  }
  sessionStorage.setItem("userInfo", JSON.stringify(userInfo));
  //dispatch中 userInfo 数据可传可不传，因为刷新的时候，这个数据是拿不到的，总 要从 sessionStorage 中获取
  this.$store.dispatch("INIT_MENU");
  this.$router.replace("/")
}

2. 在 store 文件夹下新建 index.js、actions.js、mutations.js、state.js、getters.js。

后台返回数据：（还有一些其他的 id 字段，咱也用不到，这里就不贴了，这个是个大家做一个参考）

{
   
   
  code: "0000",
  msg: "处理成功",
  router: [
         {
   
               
            path: '/dealCenter',
            name: 'dealCenter',
            component: "MyLayout",
            meta:{
   
     title: "处理中心", hidden: false },
            children: []
          },          
          {
   
   
            path: '/myWorkbench',
            name: 'myWorkbench',
            component: "MyLayout",
            meta:{
   
    title: "我的工作台", hidden: false },
            children: [
              {
   
   
                path: "workbenchOne",
                name: "workbench_one",
                meta: {
   
    title: "工作台一" },
                component: