前言

虽然都是不推荐后端返回路由表，前端大佬们都是推荐后端返回一个用户权限，前端有个整套的路由表，带着这个权限，去我定义的路由表去匹配，生成一个动态路由，但是我有个疑问，(tips:比如我想要在线上运行项目中添加一个路由我改怎么办呢？因为路由表都在前端，后端不存了，希望大佬评论下面求教。)但是一定会有后端返回路由表tree这样的需求，我们改怎么办？

找到src/store/permission.js

首先最新官网下载的vue-element-vue,在项目根目录下面有个mock文件夹，动态的数据都是从这里生成的，脱离后端了，自己可以写请求，这边官网有详细介绍，这里我只介绍如何解析后端返回给我的路由表

1. filterAsyncRouter方法

export const filterAsyncRouter = (routers) => { // 遍历后台传来的路由字符串，转换为组件对象
  const accessedRouters = routers.filter(router => {
    if (router.component) {
      if (router.component === 'Layout') { // Layout组件特殊处理
        console.log('layout')
        router.component = Layout
      } else {
      const component = router.component
      router.component = loadView(component)//下面会说

      }
    }
    if (router.children && router.children.length) {
      router.children = filterAsyncRouter(router.children)
    }
    return true
  })
  return accessedRouters
}

2. loadView方法

// 后端渲染路由树，挂载路由地址
export const loadView = (view) => { // 路由懒加载
    return (resolve) => require([`@/views/${view}`], resolve)//重点
    
  }

require([@/views/${view}], resolve)

• require: 运行时调用，理论上可以运用在代码的任何地方，
• import：编译时调用，必须放在文件开头 很多同学可能会import(@/views/${view}.vue) 比如我就是这么干，但是点击路由的时候，会报错，说找不到改模块，也就是找不到这个路径，错误原因是webpack打包逻辑，webpack4中动态import不支持变量方式，查看路由返回的信息，只是返回一个方法 所以我们必须这么写return (resolve) => require([`@/views/${view}`], resolve)

3. generateRoutes方法修改

generateRoutes({commit}, roles) {
   return new Promise(resolve => {
      let asyncRoutes
      getRoutes().then(response => {//getRoutes方法是src/api/role.js定义的请求路由方法
        console.log(asyncRoutes)
        console.log(response.data)
        asyncRoutes = response.data
        console.log(asyncRoutes)
        let accessedRoutes
        if (roles.includes('admin')) {
          accessedRoutes = filterAsyncRouter(asyncRoutes) || []
          console.log(accessedRoutes)
        } else {
          accessedRoutes = filterAsyncRoutes(filterAsyncRouter(asyncRoutes), roles)
          console.log(accessedRoutes)
        }
        commit('SET_ROUTES', accessedRoutes)
        console.log(accessedRoutes)
        resolve(accessedRoutes)
      })
    })
  }

修改mock文件夹里面的路由json资源

重点：原来里面component的字段是Layout/Layout，需要全局替换replace all 为Layout，不然后面找不到layout这个组件

  {
    path: '/addRoutes',
    component: 'Layout',
    children: [
      {
        path: 'index',
        component: 'addRoutes/index',
        name: 'addRoutes',//name控制 tagview
        meta: { title: '添加路由', icon: 'bug' }
      }
    ]
  },
  {
    path: '/userManage',
    component: 'Layout',
    children: [
      {
        path: 'index',
        component: 'userManage/index',
        name: 'userManage',//name控制 tagview
        meta: { title: '用户管理', icon: 'lock' }
      }
    ]
  },

大功告成!

不好的地方请提议，我定会虚心求教，让我学习学习你的...让我们期待下次的坑...