vue 專案的許可權限制功能, 有一種實現方案是這樣的
這個方案涉及到兩個問題:
怎麼新增路由規則
怎麼刪除路由規則
首先明確一下什麼叫路由規則?
下例的 就是一條路由規則
var router =
newvuerouter(,
]})
官方有提供新增規則的方法 router.addroutes()
router.addroutes(routes: array)動態新增更多的路由規則。引數必須是乙個符合 routes 選項要求的陣列。
var router =
newvuerouter(]
});router.
addroutes([
])
新增路由規則時, 要注意乙個細節
addroutes 只能把新路由規則新增到末尾
如你的路由規則很複雜, 乙個路徑可以匹配好幾個路由的話, 那你要仔細設計你的路由了
因為路由規則的順序是有意義的, 越靠前優先順序越高, 這將直接影響匹配結果
神奇的是官方只提供了增加規則的方法, 卻不提供刪除規則的方法
經過學習, 我找到了乙個效果相近的方法
var router =
newvuerouter(]
});router.
addroutes([
])// 獲取原始路由資料
var options = router.options
// 用原始資料重新 new 乙個路由
var _vuerouter =
newvuerouter
(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
隨著 vue3.x 的發展, vue router 也推出了 4.x(不知道為什麼中文官網好像沒提到這個)
而 4.x 中新增了 removeroute 方法, 就是使用者刪除路由規則的
如果你已經在使用 vue [email protected]
那麼上面的話當我沒說
end
Vue Router2 X多種路由實現方式總結
注意 vue router 2只適用於vue2.x版本，下面我們是基於vue2.0講的如何使用vue router 2實現路由功能。推薦使用npm安裝。npm install vue router 在main.js中，需要明確安裝路由功能 import vue from vue import vue...
基礎 vue router實現子路由
例子一 index.js import vue from vue import router from vue router import helloworld from components helloworld import first from components first import ...
使用Vue Router 2實現路由功能
注意 vue router 2只適用於vue2.x版本，下面我們是基於vue2.0講的如何使用vue router 2實現路由功能。推薦使用npm安裝。npm install vue router一 使用路由 在main.js中，需要明確安裝路由功能 import vue from vue impo...