最近閱讀vue-element-admin的權(quán)限驗證源碼時碰到了router.addRoutes這個方法不得其解莹规，查閱官方文檔得到的解釋是：
router.addRoutes
函數(shù)簽名：router.addRoutes(routes: Array<RouteConfig>)
動態(tài)添加更多的路由規(guī)則怪得。參數(shù)必須是一個符合 routes 選項要求的數(shù)組惩妇。
但什么是更多動態(tài)規(guī)則？符合routes選項的要求的數(shù)組又長什么樣？
下面用代碼來解釋
Part1 基本使用:
現(xiàn)在我們有一個非常普通的路由,
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/pageA',
name: 'pageA',
component: pageA,
}
]
const router = new VueRouter({
routes
});
export default router
那么使用router.addRoutes改造上面的配置,實現(xiàn)動態(tài)添加pageA梯影，如下:
const router = new VueRouter([
{
path: "/",
name: "Home",
component: Home
}
]);
let route=[
{
path: '/pageA',
name: 'pageA',
component: pageA,
}]
router.addRoutes(route);
export default router
小結(jié)：把原來的routes配置照搬到一個新的數(shù)組中居扒，就可以作為addRoutes的參數(shù)使用不铆，經(jīng)驗證正什，通過addRoutes動態(tài)配置的方式和普通配置無差異。
你可能會問号杏，這有什么用?那么接下來婴氮，我們來談?wù)勊膽?yīng)用:
Part 2 路由的權(quán)限驗證:
如果你的網(wǎng)頁有[普通用戶，管理員.....]等多種角色類型盾致，不同的角色能看到的頁面應(yīng)該是不同的主经，比如普通用戶不應(yīng)該看到管理員的控制臺,那么這個時候,動態(tài)路由就非常有用了
可以這么做
let pageA,pageB,pageC;
let route=[
{
path: '/pageA',
name: 'pageA',
component: pageA,
},
{
path: '/pageB',
name: 'pageB',
component: pageB,
},
{
path: '/pageC',
name: 'pageC',
component: pageC,
}
]
let commonUser=['pageA','pageB'];
let commonUserRoute=route.filter(function(page){
return commonUser.includes(page.name)
})
console.log(commonUserRoute);
router.addRoutes(commonUserRoute);
//結(jié)果
// (2) [{…}, {…}]
// 0: {path: "/pageA", name: "pageA", component: pageA}
// 1: {path: "/pageB", name: "pageB", component: pageB}
// length: 2
// __proto__: Array(0)
這樣便能完成權(quán)限驗證，當(dāng)然如果權(quán)限驗證都在前臺完成庭惜，會有一定的安全隱患罩驻，最好的還是在后臺來進行限制訪問。
