Vue router 3.x implements the addition and deletion of routing rules

For the permission restriction function of the vue project, there is an implementation scheme like this

• Enter the project
• Only set up routes without permission requirements
• Provide the permissions of the current user to the background
• According to the user's authority, the background returns the routing information that the user can use
• Translate routing information into "an array that meets the requirements of the routes option"
• Use the router.addRoutes(routes) method to add the "array that meets the requirements of the routes option" to the route

This solution involves two issues:

1. How to add routing rules
2. How to delete routing rules

---

Routing rules

First, clarify what is a routing rule?
{path:'/foo', component: Foo} in the following example is a routing rule

var router = new VueRouter({
    
    
	routes: [{
    
    
		path: '/foo',
		component: Foo
	}, {
    
    
		path: '/bar',
		component: Bar
	}]
})

Wrap the routing rules into an array, this array is the data to be provided to the router.addRoutes method below

Add routing rules

The official method to add rules is router.addRoutes()

router.addRoutes(routes: Array)
dynamically adds more routing rules. The parameter must be an array that meets the requirements of the routes option.

var router = new VueRouter({
    
    
	routes: [{
    
    
		path: '/foo',
		component: Foo
	}]
});

router.addRoutes([{
    
    
	path: '/bar',
	component: Bar
}])

In this way, bar has been added to the routing, which can be said to be simple, rude and efficient

When adding routing rules, pay attention to a detail
addRoutes can only add new routing rules to the end. For
example, if your routing rules are very complicated, and a path can match several routes, then you have to carefully design your routing
because of the order of the routing rules. It is meaningful, the higher the priority, the higher the priority, which will directly affect the matching result

Delete routing rules

The magic is that the official only provides a method to add rules, but not a method to delete rules.
After learning, I found a method with similar effect.

var router = new VueRouter({
    
    
	routes: [{
    
    
		path: '/foo',
		component: Foo
	}]
});

router.addRoutes([{
    
    
	path: '/bar',
	component: Bar
}])

// 获取原始路由数据
var options = router.options

// 用原始数据重新 new 一个路由
var _VueRouter = new VueRouter(options)

// 用新路由的 matcher 替换旧路由的 matcher
router.matcher = _VueRouter.matcher

This is equivalent to resetting the route.
After obtaining the original data, you can also insert routing rules into the options according to the project requirements, and then renew a new route.

A brief analysis of the principle of deletion method

Friends who have seen the source code of vue router probably know

After new VueRouter(), the routes data will be passed to the internal method createMatcher()

In the createMatcher method, there are three objects pathList, pathMap, nameMap and two methods addRoutes, match

The three objects are used to save the compiled routing data, because it is not exposed, so the router cannot query the compiled routing data (router.options is actually the data at the time of initialization, and the above example is also useful for it)

The two methods are returned by createMatcher and finally saved on this.matcher, which can be called by router.matcher

The essence of the above method is to use new data new a new route object _VueRouter
to get new pathList, pathMap, nameMap

Because pathList, pathMap, and nameMap are internal variables and cannot be called directly, they can
only be called by internal methods such as addRoutes, match.
Therefore, replace the matcher by replacing the entire createMatcher (here is the knowledge of closure)

Simply put, the
new matcher contains new addRoutes, match
new addRoutes, match can call new pathList, pathMap, nameMap

About vue [email protected]'s removeRoute

With the development of vue3.x, vue router also launched 4.x (I don't know why the Chinese official website does not seem to mention this)
and the removeRoute method is added in 4.x, which is the user deletes the routing rule

If you are already using vue [email protected]
then the above words when I did not say

end