vue-admin-template动态路由

vue-admin-template动态路由问题的坑

前言

在vue-element-admin中增加动态路由非常顺利，没有遇到任何bug，因为里面的东西很全，就是对我来说有点冗长，很多用不到的功能。
于是，想在vue-admin-template中实现动态路由。

比较深刻和烦人的几个坑

1. mock文件夹的问题

因为暂时是使用mock来模拟后端数据的，一开始我直接复制了/router/index.js里的基本所有内容到mock/role/routes.js。结果好像报的是Layout相关的错误。通过仔细对比vue-element-admin项目里的这两个文件，发现还是有区别的。
例如，在mock文件夹里：

{
    path: '/redirect',
    component: 'layout/Layout',
    hidden: true,
    children: [
      {
        path: '/redirect/:path*',
        component: 'views/redirect/index'
      }
    ]
  },

而router里：

{
    path: '/redirect',
    component: Layout,
    hidden: true,
    children: [
      {
        path: '/redirect/:path(.*)',
        component: () => import('@/views/redirect/index')
      }
    ]
  },

2. 动态路由一直不显示的问题

我是照着vue-element-template 根据权限动态加载路由和vue-admin-template动态路由实现+问题解决来操作的。不过其实第二篇博客里的一些问题我没有碰到，比较记得是“无法识别generateRoutes方法：“[vuex] unknown action type: permission/generateRoutes”的问题。反正基本按着这两篇博客可以大概理解动态路由的实现流程，然后知道要修改哪些文件。
但是当我确定已经正确修改完了目前已知相关的文件后，左侧菜单栏依然没有加载出动态添加access的路由。
但是当我打印要添加的路由accessRoutes时发现权限判断得挺对的，但是就是不显示，说明问题出在了加进router那一步。
通过一番查找和跟vue-element-admin（没错，因为在它上面添加我还没有碰到什么问题）的对比，发现了vue-admin-template中的/layout//components/Sidebar/index.vue文件的routes函数有点问题。
原来的是：

routes() {
    return this.$router.options.routes
  }

发现返回的还是this.
应该修改为：

 routes() {
     // return this.$router.options.routes
     return this.$store.state.permission.routes
   }

对应/store/modules/getters.js模块里的：

permission_routes: state => state.permission.routes,

---

过程应该还遇到了其他的问题，比较记得就是这些了。