标签：name addRoutes component pageA path router 浅析

最近阅读vue-element-admin的权限验证源码时碰到了router.addRoutes这个方法不得其解，查阅官方文档得到的解释是：

router.addRoutes
函数签名：

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

但什么是更多动态规则？符合routes选项的要求的数组又长什么样？
下面用代码来解释

Part1 基本使用:

现在我们有一个非常普通的路由,

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

那么使用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

小结：把原来的routes配置照搬到一个新的数组中，就可以作为addRoutes的参数使用，经验证，通过addRoutes动态配置的方式和普通配置无差异。

你可能会问，这有什么用?那么接下来，我们来谈谈它的应用:

Part 2 路由的权限验证:

如果你的网页有[普通用户，管理员.....]等多种角色类型，不同的角色能看到的页面应该是不同的，比如普通用户不应该看到管理员的控制台,那么这个时候,动态路由就非常有用了
可以这么做

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)

这样便能完成权限验证，当然如果权限验证都在前台完成，会有一定的安全隐患，最好的还是在后台来进行限制访问。

标签：name,addRoutes,component,pageA,path,router,浅析
来源： https://www.cnblogs.com/moushicheng/p/15861237.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。