技術標籤：Vue實際應用妙用

vue 專案的許可權限制功能, 有一種實現方案是這樣的

• 進入專案
• 只設置沒有許可權要求的路由
• 向後臺提供當前使用者的許可權
• 後臺根據使用者許可權, 返回該使用者可以用的路由資訊
• 將路由資訊翻譯成 “符合 routes 選項要求的陣列”
• 用 router.addRoutes(routes) 方法把 “符合 routes 選項要求的陣列” 新增到路由

這個方案涉及到兩個問題:

1. 怎麼新增路由規則
2. 怎麼刪除路由規則

路由規則

首先明確一下什麼叫路由規則?
下例的 { path: ‘/foo’, component: Foo } 就是一條路由規則

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

將路由規則包裝成陣列, 這個陣列就是下面要提供給 router.addRoutes 方法的資料

新增路由規則

官方有提供新增規則的方法 router.addRoutes()

router.addRoutes(routes: Array)
動態新增更多的路由規則。引數必須是一個符合 routes 選項要求的陣列。

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

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

這樣就已經把 bar 新增到路由當中, 可以說是簡單粗暴且高效

新增路由規則時, 要注意一個細節
addRoutes 只能把新路由規則新增到末尾
如你的路由規則很複雜, 一個路徑可以匹配好幾個路由的話, 那你要仔細設計你的路由了
因為路由規則的順序是有意義的, 越靠前優先順序越高, 這將直接影響匹配結果

刪除路由規則

神奇的是官方只提供了增加規則的方法, 卻不提供刪除規則的方法
經過學習, 我找到了一個效果相近的方法

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

這樣就相當於把路由重置了
獲得原始資料後, 也可以根據專案要求, 向 options 插入路由規則, 再重新 new 一個路由

刪除方法原理簡析

看過 vue router 原始碼的朋友大概都知道

new VueRouter() 後, routes 資料會被傳給內部方法 createMatcher()

createMatcher 方法中有三個物件 pathList, pathMap, nameMap 和兩個方法 addRoutes, match

三個物件用於儲存編譯後的路由資料, 因為沒有暴露出去, 所以 router 並不能查詢到編譯後的路由資料( router.options 其實是初始化時的資料, 上面的例子也有用到它)

兩個方法被 createMatcher return, 最終儲存在 this.matcher 上面, 可以被 router.matcher 呼叫

上面的方法本質就是用新資料 new 一個新路由物件 _VueRouter
從而得到新的 pathList, pathMap, nameMap

因為 pathList, pathMap, nameMap 是內部變數, 不能直接呼叫
只能被內部方法如 addRoutes, match 呼叫
所以用替換 matcher 的方式, 替換了整個 createMatcher (這裡是閉包的知識)

簡單點說就是
新的 matcher 包含新的 addRoutes, match
新的 addRoutes, match 可以呼叫新的 pathList, pathMap, nameMap

關於 vue [email protected] 的 removeRoute

隨著 vue3.x 的發展, vue router 也推出了 4.x(不知道為什麼中文官網好像沒提到這個)
而 4.x 中新增了 removeRoute 方法, 就是使用者刪除路由規則的

如果你已經在使用 vue [email protected]
那麼上面的話當我沒說

end