Vue 如何清空已注册路由再按需重新注册

喜欢ヅ旅行 2022-12-23 09:46 102阅读 0赞

> 希望可以不断接受开发上的挑战 ，然后不断的进行技术精进。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70][]

上面的图片大概是项目的一个portal 页 ，就是登陆后先来到portal 页面，根据当前用户的角色权限，显示当前赋予权限的系统，可能有一个系统，可能有两个系统，也可能没有任何权限。另外项目中的路由权限也是依据后台给前端的数据，因此对应的路由的注册，也是如果当前用户有这个系统的权限，根据系统管理的配置也可以配置到某个菜单的权限，服务端将当前用户的菜单权限给到前端，前端再进行动态的注册，这个的核心就是addRoute,关于去重等，不做详细的说明。如果仅仅是前面的需求，就是登陆后，直接根据用户获取到对应的菜单权限，进行路由的注册，直接进入系统就可以了，但是现在将系统管理提至portal页面了，希望是在进入系统管理后，点击返回到portal页面的入口，可以直接到portal 页，而此时用户的一些权限有可能已经发生了改变，比如原来有没有系统1的权限，现在有了，或者已经和原来的权限完全不同了，因此需要重新根据权限进行路由的注册，如果不注册可能菜单都有，但是页面可想而知。因为原项目的路由注册是在路由拦截守卫初进行判断的，我了不大动原来的代码逻辑，也选择了在路由守卫处进行判断重新注册，因此获从服务器重新获取权限的操作，就需要放在进入portal 页之前。

核心清空路由的代码改动如下：

原来Router 直接定义一个常量对象，而现在要改为一个函数，以便清空等不必要的内容。

const createRouter =()=>({
                routes:[{
                    path:'/',
                    redirect:'/login'
                },{
                    path:'login',
                    name:'login',
                    component:Login
                },{
                    path:'/navigation',
                    name:'navitagtion',
                    component:Navigation
                }]
            })
            const router = createRouter()
    
            ...... 省略无数的代码
    
            // 清空原来已经注册的路由，那就要设置路由的matcher
            router.matcher = createRouter().matcher
    
            // 接下来再走普通注册路由的方式就OK了

想说的就那么多 。此处不知道怎么输入一个表情包。。。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70]: /images/20221120/5c03fa846ea24f4f862ea2da8e5a27d7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 1]: /images/20221120/9a38778547914310825aff0c87a46d85.png