因此，我们一开始的时候，就不应该为系统页直接占用path: 'https://www.jb51.net/'的路由。但是也不能为目前已知的任何一个页面占用path: 'https://www.jb51.net/'，因为即使你现在明确哪个页面是默认打开页，但是你不能保证你的产品经理不会变心啊，万一后面又要改呢？
所以！我们要为目前已知的每个页面都设置路径名，而不能占用path: 'https://www.jb51.net/'；而实现默认打开的功能，就要利用redirect进行跳转
// example 4 const router = new VueRouter({ routes: [ { path: '/main' component: Main, children: [...] }, { path: '/home' component: Home }, { path: 'login', component: Login }, { path: 'https://www.jb51.net/', redirect: '/login' } ] });
这样的话，不论后面怎么变化，你只需要做新增/删除路由 以及 改变redirect值控制打开默认页了。这就是最终的解决方案了
优化路由结构内容
还是在上一个例子结论的基础上进行这节的描述，假设你的系统比较大，有很多的页面，很多的模块，例如菜单栏中有比较多的一级菜单，而每个一级菜单下又有很多二级菜单甚至子孙菜单。
好，就算你现在拿到的需求是很少系统内容的，但是你也不能保证以后你的系统会发展成什么样，万一卖得很好，加很多功能需求呢。
在上述假设的条件下，那么你就得往children里加很多路由映射了
{ path: '/main' component: Main, children: [...] }
如此一来，你的这个文件，必定很长很长！因此，我们要拆分，进行模块化引入。
可以以你一级菜单的名字命名进行模块拆分，一个一级菜单对应一个文件（如果你的系统有功能模块的区分，那也可以按照功能模块来拆分文件），然后引入到这个主路由配置文件即可。
// example 5 ... import overview from './overview'; import copyrightManager from './copyrightManager'; import monitor from './monitor'; const router = new VueRouter({ routes: [ { path: '/main' component: Main, children: [ { path: '', // 默认进入的系统内部页 redirect: 'overview' }, ...overview, ...copyrightManager, ...monitor ] }, { path: '/home' component: Home } ] });
这里例子中就是把原本写在children里边的一个个路由映射单独写在每个文件里（自己分类好），然后通过import引进来，利用...再把它放回进去。
这样维护起来就更加方便啦
总结
关于路由的配置优化介绍就说到这里了，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章: