Vue动态获取路由

思路：

1. 读取后端接口，获取路由，前端处理成为路由的标准形式
2. 拼接固定路由和动态路由
3. 在路由前置守卫中，通过addRoutes把路由挂载到router上

把获取到的路由构造成为前端可以挂载的形式，主要是把component转化过来

export const loadView = (view) => {
  if (process.env.NODE_ENV === 'development') {
    return (resolve) => require([`@/pages${view}`], resolve)
  }
  // 使用 import 实现生产环境的路由懒加载
  return () => import(`@/pages${view}`)
}

后端获取路由

router.addRoutes(accessRoutes) 

把路由挂载到router上，让sidebar组件拿到数据

router.options.routes = accessedRoutes

addRoutes挂载无效

store.dispatch('GenerateRoutes').then((accessRoutes) => {
    console.log(111)
    router.addRoutes(accessRoutes) // 动态添加可访问路由表
    next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
  })

页面刷新404

获取路由后再添加404路由

accessedRoutes.push({ path: '*', redirect: '/404', hidden: true })