1

image.png
这是vue router官方提供的一个动态添加路由的方法。但是在很多场景下,我们也是需要一个删除路由的办法。但是官方没有提供,就很尴尬。当然是用全局路由守卫也是可以实现的,但是我是个喜欢钻牛角尖的人,最终在issue上看到有人提供了这样一个方案。今天就在这里整理一下,方便更多的人使用。
其实在sf上已经有其他大神描述过这一点(怎么removeRoutes)了
链接啊
image.png

其实每次在vue实例化的时候,我们的路由其实已经装载好了,这份路由称为静态路由,假设我们此时的路由只有/login 但是在登录成功后我们去后端查询了一下当前的权限,发现具有权限A和B,所以我们就需要动态添加/a和/b,这个时候用addRoutes就可以实现,注意啊调用addRoutes的是Router实例(不知道什么是Router实例的看下官方api说的很清楚了)。
但是如果权限是动态的,可能登陆5分钟后,该用户的权限B被取消了,那么我们就需要删除/b,(这里不讨论全局守卫拦截的方案,虽然也可以),怎么删除呢?其实就很简单了,也是拿到Router实例,修改它的matcher即可,如上面截图,就是需要一个数据(变量)赋值给它就好了,这个变量是谁呢?就是你重新new一个Router实例就好,那么你会问new一个空的Router实例还是?不,new一个你希望包括哪些路由的路由实例就好了。亲测有效。


Alex_Max
70 声望4 粉丝