在此之前添加路由只需要把后端返回的结构树放到 addRouters中就可以 router4更新后 废除了addRouters 新增addRoute 下面介绍一下addRoute的用法

把后端数据动态添加进去路由中

一般后端返回的都是平级路由结构，只需要循环把路由添进去不用和本地路由合并，并且，最好封装一个方法，在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,) //调用上面的addRoute方法，添加路由
      store.commit('SET_TOKEN', cookie.get('token')) //继续向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第一个参数 填写 父级路由的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: "子路由 " },
      }]
  })