vue3 中的router.addRoute和router.options.routes

 

问题：router.addRoute后用router.options.routes去都不更新

最后解决方法：

let registerRouteFresh = true // 定义标识，记录路由是否添加

router.beforeEach(async(to: any, from: any, next) => {

................

   //变量，防止重复循环遍历
          if (registerRouteFresh) {
           await store.dispatch('user/getMenu', roles).then((res)=>{
              // console.log("chen已经返回")
              const asyncRouter = res;
              // console.log("chen permession router")
              // console.log(asyncRouter)
              asyncRouter.forEach((element:any) => {
                  router.addRoute(element)    //(1)注意，重点，添加后看不见，要在options中添加
                  router.options.routes.push(element);  //（2），添加后才能用模板
                  // console.log(router.hasRoute(element))  //（3）判断是否包含，如果不用2，自己在浏览器里试试可以看到导航成功
              });
              console.log(router)
           });

           //第一次加载重复遍历
           next({...to, replace: true})
           registerRouteFresh = false

          //  console.log(router.hasRoute('/chentest'))
         } else {
           next()
         }


......................


}

备注，addRoute一次添加一个，嵌套子路由和父级可以一次添加。

 2、补丁仍然需要，退出页面中后刷新页面

    onUnmounted(()=>{
      // console.log("onUnmounted")
      // router.options.routes=[];
      location.reload();
    });

-----------------------------------------------------------------------------------------------------------

以下过程中，供参考，

参考

Vue的router.addRoutes()不起作用解决方案 - 认真，是一种态度 - 博客园

1、我的暂时解决

import Layout from '@/layout/index.vue'
import { useRouter} from "vue-router";
export default {
  components: {
    SidebarItem,
  },
  setup() {
    const router = useRouter();
     //测试
    onBeforeMount(()=>{
    const chennewrouter = {
        name: '/screenmanage', 
            path: '/screenmanage',
            component: Layout,
            meta: { title: 'XXX管理', chenissidehow: true, icon: 'i-platform' }, 
            children: [
              {
                path: 'screen_select',
                name: 'screen_select',
                component: () => import('@/views/screenmanage/screenselect.vue'),
                meta: { title: 'XXX显示选择', chenissidehow: true, icon: 'i-platform' },
              }
            ]
      };
      router.addRoute(chennewrouter);
      router.options.routes.push(chennewrouter);
    }

}

 注意，加了push，感觉不是好的解决方案

2、补丁，意外情况下会重复添加导致重复路由

   //不重复添加的函数
    Array.prototype.pushWithoutDuplicate = function () {
      for (let i = 0; i < arguments.length; i++) {
        const arg = arguments[i]
        // this表示调用的数组
        if (this.indexOf(arg) === -1) {
          this.push(arg)
        }
      }
    }

    // 这样的话
    // let a = [1, 2, 3]
    // a.pushWithoutDuplicate(4)   //成功 a = [1, 2, 3, 4]
    // a.pushWithoutDuplicate(3)  // 无反应

---------------------
---------------------
---------------------
    router.addRoute(chenmenurouter);
    // router.options.routes.push(chenmenurouter);        
    router.options.routes.pushWithoutDuplicate(chenmenurouter);   

3、补丁3，退出后刷新页面

    onUnmounted(()=>{
      // console.log("onUnmounted")
      // router.options.routes=[];
      location.reload();
    });