vue根据后端数据动态显示路由

// router.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

/* Layout */
import Layout from '@/layout'

// 路由基础路径
export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },

  { path: '/caslogin',
    meta: { title: 'cas登录', noCache: true },
    component: () => import('@/views/cas-login/index'),
    hidden: true
  },

  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },

  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    hidden: true,
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: ' 首页', icon: 'dashboard', affix: true }
    }]
  }
]

export default router

// permission.js 根据权限动态添加路由(此处只写核心部分)


     router.beforeEach(async(to, from, next) => {

       const hasToken = getToken()
    if (hasToken) {
      if (to.path === '/login') {
        next()
        // NProgress.done()
      } else {
      // determine whether the user has obtained his permission roles through getInfo
      // 获取用户角色
      const hasRoles = store.getters.roles && store.getters.roles.length > 0
      // 获取角色为一个异步 首先会进入 else判断
      if (hasRoles) {
        store.commit('permission/SWITCH_MENU', to.path)
        store.dispatch('app/showSideBar', { opened:store.getters.permission_routes.length > 5 })
        next()
      } else {
         // 核心部分
        try {
          // 获取用户角色信息
          const { roles } = await store.dispatch('user/getInfo')

          // 根据角色 获取角色的路由
          const accessRoutes = await store.dispatch('permission/generateRoutes', { roles, toPath: to.path })
          // 动态添加路由
          console.log(accessRoutes, 'accessRoutes')
          router.addRoutes(accessRoutes)

          next({ ...to, replace: true })
        } catch (error) {
          // 删除令牌并转到登录页面重新登录
          await store.dispatch('user/resetToken')
          Message.error(error || 'Has Error')
          next(`/login?redirect=${to.path}`)
          NProgress.done()
        }
      }
    }
  } 
})

 console.log(accessRoutes):