[JavaScript知识库]vue3 中的router.addRoute和router.options.routes

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

参考

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();
    });