您当前的位置首页/Vue.js/ 正文

vue-router动态添加路由addRoutes

admin 最后更新时间 2018-06-30 17:32:04   324浏览
vue-router的路由,一般情况下不需要动态添加,直接定义就完了。 但是如果要做权限划分的系统,动态添加是个不二选择。 addRoutes就是用来动态添加的方法,用法也非常简单,直接往里面传一个routes数组就完了。 但是有个疑问是,如果我原来定义了一个路由的path是 * ,表示匹配以上所有未匹配的路由时,会不会有问题?动态添加是怎么加进去的?是从原来的后面加还是前面加? 带着个这个疑问,我查阅了vue-router的源码,答案是,path 为 * 的路由,会被移到最后,其他的,保持原位,上代码 ``` function createRouteMap ( routes, oldPathList, oldPathMap, oldNameMap ) { // the path list is used to control path matching priority var pathList = oldPathList || []; // $flow-disable-line var pathMap = oldPathMap || Object.create(null); // $flow-disable-line var nameMap = oldNameMap || Object.create(null); routes.forEach(function (route) { addRouteRecord(pathList, pathMap, nameMap, route); }); // ensure wildcard routes are always at the end 看这里,下面就是把*的移动了路由数组的末尾,保证了路由的正确导航 for (var i = 0, l = pathList.length; i < l; i++) { if (pathList[i] === '*') { pathList.push(pathList.splice(i, 1)[0]); l--; i--; } } return { pathList: pathList, pathMap: pathMap, nameMap: nameMap } } ``` 所以,方向用吧。无问题。