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

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

vue-element-admin的权限验证

​​router.addRoutes​​

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

​​路由的权限验证​​

​​Array)

更多动态规则？符合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)

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。