vue-router设置多级路由那些事

两天没有接着写这个文档了，主要是在路由这块，多极路由嵌套，没有仔细看文档，走了不少弯路，

官网：https://router.vuejs.org/zh-cn/essentials/nested-routes.html

项目源码：GitHub - jianshidaima/admin: vue2全家桶开发商户管理后台

先说说  我遇到的麻烦吧，

1、对与侧边栏导航展示

根路由：’/’，

一级路由：’/goos’

二级路由：’goodsList’

细心地同学会发现，在二级路由里没有 “/”这个符号,然而这就是我遇到的第一个麻烦，来看看官网给的例子： 

这下似乎明白了，只有根路径  才会加上“/”,其二级，三级..都不需要加上“/”

在说明一点：在设置路由的时候，尽量把name设置成path的值，在meta里加上需要的name值，就像这样：

这样方便的地方就是 在router-link配置to的时候用:to=‘{name:""}'，这样更容易匹配路由

2、把所有的路由，都写在 src/router/index.js里这样是不是太难维护了，而且有的路由，是从服务器上获取的，如何添加上呢？

于是一番百度，发现了一个addRoutes;

router.addRoutes(routes)

2.2.0+

动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。

接下来 我把我写的路由分成不同的模块文件，然后再APP.vue跟组件统一添加到路由上，想法很好，现在去实现吧！

路由模块文件结构：

router/index.js: 

router/leftSlider.js: 

router/portal/index.js: 

router/portal/forget.js: 

router/portal/register.js: 

在跟组件 app.vue里将路由模块挂在到路由上： 

到这里路由，全部挂在！大功告成。

重启服务：npm run dev 在地址栏输入：http://localhost:8080/#/portal/forget