兩天沒有接著寫這個(gè)文檔了味悄,主要是在路由這塊荷憋,多極路由嵌套罐脊,沒有仔細(xì)看文檔旗国,走了不少彎路枯怖,
官網(wǎng):https://router.vuejs.org/zh-cn/essentials/nested-routes.html
項(xiàng)目源碼:GitHub - jianshidaima/admin: vue2全家桶開發(fā)商戶管理后臺
先說說? 我遇到的麻煩吧,
1能曾、對與側(cè)邊欄導(dǎo)航展示
根路由:’/’度硝,
一級路由:’/goos’
二級路由:’goodsList’
細(xì)心地同學(xué)會發(fā)現(xiàn),在二級路由里沒有 “/”這個(gè)符號,然而這就是我遇到的第一個(gè)麻煩寿冕,來看看官網(wǎng)給的例子:?
這下似乎明白了蕊程,只有根路徑? 才會加上“/”,其二級,三級..都不需要加上“/”
在說明一點(diǎn):在設(shè)置路由的時(shí)候驼唱,盡量把name設(shè)置成path的值藻茂,在meta里加上需要的name值,就像這樣:
這樣方便的地方就是 在router-link配置to的時(shí)候用:to=‘{name:""}',這樣更容易匹配路由
2辨赐、把所有的路由优俘,都寫在 src/router/index.js里這樣是不是太難維護(hù)了,而且有的路由掀序,是從服務(wù)器上獲取的帆焕,如何添加上呢?
于是一番百度不恭,發(fā)現(xiàn)了一個(gè)addRoutes;
router.addRoutes(routes)
2.2.0+
動態(tài)添加更多的路由規(guī)則叶雹。參數(shù)必須是一個(gè)符合 routes 選項(xiàng)要求的數(shù)組。
接下來 我把我寫的路由分成不同的模塊文件换吧,然后再APP.vue跟組件統(tǒng)一添加到路由上浑娜,想法很好,現(xiàn)在去實(shí)現(xiàn)吧式散!
路由模塊文件結(jié)構(gòu):
router/index.js:?
router/leftSlider.js:?
router/portal/index.js:?
router/portal/forget.js:?
router/portal/register.js:?
在跟組件 app.vue里將路由模塊掛在到路由上:?
到這里路由,全部掛在打颤!大功告成暴拄。
重啟服務(wù):npm run dev 在地址欄輸入:http://localhost:8080/#/portal/forget