ts的动态路由

把component转为函数，组件路径要写对

export function convertRouter(asyncRoutes: any) {
  asyncRoutes = asyncRoutes.filter((item: any, index: Number) => index === 0)
  return asyncRoutes.map((route: any) => {
    if (route.component) {
      if (route.component === 'Layout') {
        route.component = (resolve: any) => require(['@/layout/index.vue'], resolve)
      } else if (route.component === 'LayoutC') {
        route.component = (resolve: any) => require(['@/layout/index.vue'], resolve)
      } else {
        if (typeof (route.component) === 'string') {
          const index = route.component.indexOf('views')
          const path =
            index > 0 ? route.component.slice(index) : `${route.component}`
          route.component = (resolve: any) => require([`@/${path}`], resolve)
        }
      }
    }
    if (route.children === undefined) route.children = []
    if (route.children && route.children.length) { route.children = convertRouter(route.children) }
    if (route.children && route.children.length === 0) delete route.children
    console.log(route, 'sadasdsa')
    return route
  })
}

路由守卫的时候再处理检验路由及添加路由，不要重复

防止页面刷新，vuex数据（路由）丢失

router.beforeEach(async (to: Route, _: Route, next: any) => {
  // Start progress bar
  NProgress.start()
  // Determine whether the user has logged in
  if (UserModule.token) {
    if (to.path === '/login') {
      // If is logged in, redirect to the home page
      next({ path: '/' })
    } else {
      console.log('router to page')
      if (PermissionModule.dynamicRoutes.length === 0) {
        await UserModule.AddAsyncRoute()
        next({ ...to, replace: true })
      } else next()
      //     Message.error(err || 'Has Error')
      //     next(`/login?redirect=${to.path}`)
      //     NProgress.done()
    }
  } else {
    // Has no token
    if (whiteList.indexOf(to.path) !== -1) {
      // In the free login whitelist, go directly
      next()
    } else {
      // Other pages that do not have permission to access are redirected to the login page.
      next(`/login?redirect=${to.path}`)
      NProgress.done()
    }
  }
  NProgress.done()
})

router相关的数据类型

Route,路由对象，获取路由
RouteConfig[]：初始化路由

router的一些api

GenerateRoutes：get Routes，save in vuex（SET_ROUTES）
addRoute设置路由
PermissionModule.dynamicRoutes.forEach(route => {
router.addRoute(route)
})