1.router.addRoute()可以动态添加一条路由

router.addRoute(

{

name: 'user',

path: '/system/user',

meta: { title: '用户管理' },

component: () => import('@/views/User.vue')//路由按需加载

},

)

 2.router.addRoute()可以动态添加嵌套路由

router.addRoute(

{

'home',

name: 'user',

path: '/system/user',

meta: { title: '用户管理' },

component: () => import('@/views/User.vue')//路由按需加载

},

)

3.动态添加多个路由

 一般情况：

1. 页面打开，全局路由前置守卫，先获取token，没有token，跳转到登陆页面，有token跳转到相应路由位置。

router.beforeEach((to, from, next) => {
  store.commit('getToken')
  const token = store.state.token
  if (!token && to.name !== 'login') {
    next({ name: 'login' })
  } else if (!checkRouter(to.path)) {
    next({ name: 'home' })
  } else {
    next()
  }
})

登录页面，点击登录，向后端接口发送api请求。后端根据用户名不同，返回不一样的菜单列表，触发mutation中的方法，设置路由，存储到本地localstorage中。再触发addMenu动态添加路由，

    const login = async () => {
      const res = await proxy.$api.getMenu(loginForm);
      // console.log(res);
      store.commit("setMenu", res.menu);
      store.commit("addMenu", router);
      store.commit("setToken", res.token);
      router.push({
        name: "home",
      });
    };

 addMenu(state, router) {
      if (!localStorage.getItem('menu')) {
        return
      }
      const menu = JSON.parse(localStorage.getItem('menu'))
      state.menu = menu

      const menuArray = []

      menu.forEach(item => {
        if (item.children) {
          item.children = item.children.map(item => {
            let url = `../views/${item.url}.vue`

            item.component = () => import(url)
            return item
          })
          menuArray.push(...item.children)
        } else {
          let url = `../views/${item.url}.vue`
          item.component = () => import(url)
          menuArray.push(item)
        }
      })

      menuArray.forEach(item => {
        router.addRoute('home1', item)
      })
    },