在此之前添加路由只需要把后端返回的結(jié)構(gòu)樹放到 addRouters中就可以 router4更新后 廢除了addRouters 新增addRoute 下面介紹一下addRoute的用法

把后端數(shù)據(jù)動態(tài)添加進去路由中

一般后端返回的都是平級路由結(jié)構(gòu)，只需要循環(huán)把路由添進去不用和本地路由合并确镊，并且士骤，最好封裝一個方法，在beforeEach方法中每次去檢查store中有無token

let data = [{ path: '/xxx',meta: { hidden: true, title: 'xxx' } }, {path: '/xxx/xxx', meta: { hidden: true, title: 'xxx' }}]

//這是我的方法
function addRoute(data) {
  const maplist = new Map();
  data.forEach(item => {
    if (item.parentId === 0) { // 把父級放到最上面 方便子路由往里添
      maplist.set(item.id, { name: item.name, path: item.path })
      router.addRoute({
        path: item.path,
        redirect: item.redirect,
        component: Layout,
        name: item.name,
        meta: { title: item.title, icon: item.icon, id: item.id }
      })
    } else {
      router.addRoute(maplist.get(item.parentId).name + '', {
        path: `${item.path}`,
        component: () => import(`@/${item.component.slice(2)}`),
        name: item.name,
        meta: {
          title: item.title,
          hidden: item.hidden != 0, id: item.id
        }
      })
    }
  })
  // 一定要把404最后加上去  不然回刷新白屏 
  router.addRoute({
    path: '*',
    redirect: '/404',
    meta: { hidden: true }
  })
}
//在beforeEach中的方法
 if (cookie.get('token') != (store.state as any).app.token) {
     // sideMenuList拷肌，獲取緩存的menu
    if (sideMenuList?.length) {
      await addRoute(menuList,) //調(diào)用上面的addRoute方法，添加路由
      store.commit('SET_TOKEN', cookie.get('token')) //繼續(xù)向store 中寫入token
      next({ ...to })
    } else {
        ...do
        next()
     }  

添加一級路由

 this.$router.addRoute({
    path:'123',
    component: () => import("@/views/xxx.vue"),
    name: "name123",
    meta: { title: "一級路由 " },
})

添加子路由

 this.$router.addRoute('name123',{ // 添加子路由只需把 addRoute第一個參數(shù) 填寫 父級路由的name即可
    path:'456',
    component: () => import("@/views/xxx.vue"),
    name: "name456",
    meta: { title: "子路由 " },
})

另外 addRoute還支持 嵌套添加

 this.$router.addRoute({
    path:'123',
    component: () => import("@/views/xxx.vue"),
    name: "name123",
    meta: { title: "一級路由 " },
    children:[{
        path:'456',
        component: () => import("@/views/xxx.vue"),
        name: "name456",
        meta: { title: "子路由 " },
      }]
  })