两天没有接着写这个文档了,主要是在路由这块,多极路由嵌套,没有仔细看文档,走了不少弯路,
官网: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
网友评论