MUKI AI Summary
規劃部落格網址結構時,初始設計為首頁、分頁、分類、分類分頁及單篇文章路徑。遇到問題是 Vue 將巢狀路由的 category 當成 :pageIndex 的參數,導致無法顯示正確網址。
調整方法是將 :pageIndex 也設為巢狀路由,並修改路由順序,將 :pageIndex 放在最後渲染。如此一來,當路徑為 /topic/category/cateA/1 時,能優先渲染正確頁面,不被 :pageIndex 截胡。...
前情提要
最近在帶新人同事規劃部落格的網址結構,因為想讓他嘗試實作自己的構思,所以就讓他自由發揮啦!
這是同事規劃出來的網址結構:
- 首頁:
/topic
- 分頁:
/topic/:pageIndex
- 分類:
/topic/category/:categoryName
- 分類的分頁:
/topic/category/:categoryName/:pageIndex
- 單篇文章:
/topic/article?id={id}
碰到的問題
一開始只做首頁與分頁時,路由規劃如下,一切都如此單純美好:
{ path: '/topic/:pageIndex', component: 'topicView' }
接著我請他加入分類與單篇文章的路由,同事一開始是這樣寫的:
{ path: '/topic/:pageIndex', component: 'topicView', children: [ { path: 'category/:name/:pageIndex', component: 'categoryView' }, { path: 'article', component: 'articleView' } ] }
然後問題就來了!
因為結構的問題,Vue 會把巢狀路由的 category
當成 :pageIndex
的參數,傳到 /topic/
裡面,因此不管怎麼調整,都沒辦法顯示正確的網址。
調整路由結構
我的處理方法,是把 :pageIndex
也變成巢狀路由:
{ path: '/topic', component: 'topicView', children: [ { path: ':pageIndex', component: 'indexView' }, { path: 'category/:name/:pageIndex', component: 'categoryView' }, { path: 'article', component: 'articleView' } ] }
修改路由順序
不過這樣改完還是沒效果,那是因為 :pageIndex
會優先被渲染,但我們希望可以先考慮 category
以及 article
這兩個路徑,所以只要將 :pageIndex
放在後面,讓他最後被渲染即可:
{ path: '/topic', component: 'topicView', children: [ { path: 'category/:name/:pageIndex', component: 'categoryView' }, { path: 'article', component: 'articleView' }, { path: ':pageIndex', component: 'indexView' }, ] }
修改過後,當今天路徑為 /topic/category/cateA/1
時,就能優先渲染,不會被 :pageIndex
截胡啦。