前端Vue-vue-element-admin-router.addRoutes

vue-element-admin的權限驗證

• ​​router.addRoutes​​

• ​​非常普通的路由​​
• ​​動态添加pageA​​

• ​​路由的權限驗證​​

​​https://panjiachen.github.io/vue-element-admin-site/zh/​​

權限驗證源碼時碰到了

router.addRoutes

router.addRoutes
函數簽名：

router.addRoutes(routes: Array<RouteConfig>)      

更多動态規則？符合routes選項的要求的數組又長什麼樣？

非常普通的路由

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
{
  path: '/pageA',
  name: 'pageA',
  component: pageA,
}
]
const router = new VueRouter({
  routes
});
export default      

使用router.addRoutes改造上面的配置,實作

動态添加pageA

const router = new VueRouter([
  {
    path: "/",
    name: "Home",
    component: Home
  }
]);
let route=[
{
  path: '/pageA',
  name: 'pageA',
  component: pageA,
}]
router.addRoutes(route);
export default      

把原來的routes配置照搬到一個新的數組中，

就可以作為addRoutes的參數使用，

經驗證，通過addRoutes動态配置的方式和普通配置無差異。

路由的權限驗證

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);
//結果
// (2) [{…}, {…}]
// 0: {path: "/pageA", name: "pageA", component: pageA}
// 1: {path: "/pageB", name: "pageB", component: pageB}
// length: 2
// __proto__: Array(0)