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

权限验证源码时碰到了

router.addRoutes

router.addRoutes
函数签名：

router.addRoutes(routes: Array<RouteConfig>)
动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。 
1
2
3
4
5

更多动态规则？符合routes选项的要求的数组又长什么样？

非常普通的路由

 const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
{
  path: '/pageA',
  name: 'pageA',
  component: pageA,
}
]
const router = new VueRouter({
  routes
});
export default router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

使用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 router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

把原来的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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30