Vue使用addRoute实现动态路由vue- router

说起动态路由刚开始的时候我觉得很简单，然而显示并不是这样的
刚开始我的思路是这样的：

// JSON 路由模拟的
import { accessedRoutes } from './dynamicRoute'

import { distinguishApi, bdTokenApi } from "@/api/lianxi";
const Layout = import('@/layout/index.vue')
const access_token = "24.bbe13e4dc39905f4fb9c9be1b"
let arrs = []
distinguishApi(
    { image: '' },
    access_token
).then((res) => {
    console.log('res', res)
    // 我这里利用别的请求 然后把json数据赋值
    // 当做请求后返回的数据
    arrs = accessedRoutes
});

const routes = [
    {
        path: '/login',
        name: 'login',
        component: () => import('@/views/login/index.vue'),
        children: [],
        mate: {
            title: '登录',
        }
    }
];

// 这里将请求过来的值 push 到 routes 里面，导出挂载
routes.push({
    path: '/',
    name: 'layout',
    component: Layout,
    children: accessedRoutes
})

export { routes }

后来我发现路由老是加载不出来，我打印了router.options 里面也有值，确实是 push 进去了单页面确实没有渲染，
然后，我把请求去掉直接push 页面上是有的，我试了好多次，我发现我忽略了一点，请求是有延迟的，可能是当请求还没结束，router就已经挂载到 Vue 实例上了。
然后在网上找的资料，有一个 router.addRoute 方法来实现动态路由

// 处理 JSON 文件里面的数据
/**
 * 
 * 动态路由
 */

import { routesChiden } from "./router.json"

const loadView = (view) => { 
    return import(`@/views${view}.vue`)
}
const accessedRoutes = filterAsyncRouter(routesChiden, loadView)

function filterAsyncRouter(row, loadView) {
    for (var i = 0; i < row.length; i++) {
        row[i].component = loadView(row[i].component)
    }
    return row
}

export { accessedRoutes }


// Vuex 全局状态管理

class Enum extends VuexModule {
  private routeLists = [];

  private hasGetRoute = false
  /**
   * 
   * @param data 赋值动态路由
   */
  @Mutation
  setRouteList( data:any) {
    // 先将 JSON 格式的路由列表解析为 JavaScript List
    // 再用路由解析函数解析 List 为真正的路由列表
    this.routeLists = data
    // 修改路由获取状态
    this.hasGetRoute = true
  }
  /**
   * 
   * @returns 获取动态路由
   */
  @Action
  set_getRouteList() {
    return new Promise((resolve) => {
      distinguishApi(
        { image: '' },
        access_token
      ).then((res) => {
        this.setRouteList(accessedRoutes)
        resolve(accessedRoutes)
      });
    })
  }
 }
 
 
//  路由拦截

router.beforeEach((to, from, next) => {
	// 重定向
    if(to.path == '/'){
        next('/home')
    }
    if (!menuStore.getHasGetRoute) {
        // 如果没有获取路由信息，先获取路由信息而后跳转
        menuStore.set_getRouteList().then((res) => {
            console.log('res' , res)
            router.addRoute({
                path: "/",
                name: "layout",
                component: Layout,
                children: menuStore.getRouteList
            })
            next({ ...to, replace: true })
        })
    } else {
        // 如果已经获取路由信息，直接跳转
        next()
    }
})

这里参考地址：https://www.jb51.net/article/182033.htm

在这里我说明一下，参考地址他用的是 router.addRoutes(Array) , 参数是数组
我这边用的是，router.addRoute(Object) , 参数是对象
因为我这边使用的是 vue-cli4.x 版本，在官方文档中解释 router.addRoutes 已经废弃了

vue-router 官方地址 ： https://router.vuejs.org/zh/api/#router-resolve

笔记