最近看到router.addRoutes这个方法，查阅官方文档得到的解释是：
router.addRoutes
函数签名：router.addRoutes(routes: Array<RouteConfig>)
动态添加更多的路由规则。参数必须是一个符合 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)
这样便能完成权限验证，当然如果权限验证都在前台完成，会有一定的安全隐患，最好的还是在后台来进行限制访问。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/126756.html
