vue 动态路由添加的问题

vue3中在router/index.js中

import { createRouter, createWebHistory } from 'vue-router';
import store from 'store'

const userRule = {
  path: 'user',
  component: () => import('@/views/user/index.vue'),
  children: [
    {
      path: 'list',
      name: 'userList',
      meta: { title: '用户列表', parents: '用户管理', keepAlive: true },
      component: () => import('@/views/user/userList.vue'),
    },
    {
      path: 'list',
      name: 'userList',
      meta: { title: '用户列表', parents: '用户管理', keepAlive: true },
      component: () => import('@/views/user/userList.vue'),
    }
  ]
}
const operationRule = {
  path: 'opreation',
  component: () => import('views/opreation/index.vue'),
}
const reviewRule = {
  path: 'review',
  component: () => import('views/review/index.vue'),
}
const addissuanceRule = {
  path: 'addissuance',
  component: () => import('views/addissuance/index.vue'),
}
const financeRule = {
  path: 'finance',
  component: () => import('views/finance/index'),
}
const statisticsRule = {
  path: 'statistics',
  component: () => import('views/statistics/index'),
}
const accountRule = {
  path: 'account',
  component: () => import('views/account/index'),
};
//映射相应的 权限
const ruleMapping = {             //匹配路由名字获得对应组件
  'user': userRule,
  'review': reviewRule,
  'operation': operationRule,
  'addissuance': addissuanceRule,
  'finance': financeRule,
  'statistics': statisticsRule,
  'account': accountRule,
}
//基础路由
const routes = [
  {
    path: "/",
    name:'home',
    meta:{title:'首页'},
    component: () => import('views/Home.vue'),
  },

  {
    path: '/login',
    component: () => import('views/Login.vue')
  },
  {
    path: "/:catchAll(.*)",            //思路2.界面的控制:   用户手动输入任何不匹配的路由地址，就转到notFound页
    component: () => import('views/404.vue')
  }
]

const router = createRouter({
  history: createWebHistory(), //createWebHistory  or createWebHashHistory
  routes: routes
})
//动态添加路由
export function initDynamicRoutes() {
  const currentRoutes = router.options.routes;
  //在状态机中获取所有的菜单
  const menuList = store.state.user.menuList;  
  //在状态机里获取登录人的权限
  const rights = store.state.user.userInfo.rights;
  
  menuList.forEach(item => {
    //循环所有的的菜单 通过 authority属性里的权限集合判断是否包含当前权限
    if(item.authority.includes(rights)){
      const temp = ruleMapping[item.name];      //↑↑匹配路由名字获取对应组件
      // currentRoutes[0].children.push(temp); 
      //在vue2中可以通过router.addRoutes来添加一个数组，但是vue-router 4.0后没有addRoutes知道手动添加,此时可以通过router.push('/user/userlit')来进行跳转，
      router.addRoute('home',temp)
    } 
  })
}
let routerFlag = true;
router.beforeEach((to, from, next) => {
  document.title = to.meta.title
  let userInfo = store.getters['user/users'];
  if (!userInfo && to.path != '/login') {
    next('/login')
  } else {
    //通过router.addRoute动态添加的路由刷新页面后就没了，这里可以通过一个标识符routerFlag来判断，刷新后routerFlag为true,我们在手动添加一次就行了然后变成false
    if(routerFlag){
      initDynamicRoutes();
      console.log(routerFlag);
      next({path:to.path})
      routerFlag = false;
    }else{
      next();
    }
  }
})

export default router;

vue2 中动态添加路由

//动态添加路由
export function initDynamicRoutes(){
   console.log(router);

   const currentRoutes = router.options.routes;
   const rightList = store.state.rightList;            //获取vuex中路由权限数组

   rightList.forEach( item => {
        item.children.forEach(item =>{
             const temp = ruleMapping[item.path];      //↑↑匹配路由名字获取对应组件
             temp.meta = item.rights                   //将二级权限添加到 meta对象中.  思路4:请求&响应的控制就是通过匹配meta中的权限来操作的

             currentRoutes[2].children.push(temp);     //添加到 /home的childern中作为子路由
        })
   })
   router.addRoutes(currentRoutes);
}