/
CATEGORY
Vue
/
設定 Vue Router 讓巢狀路由的 parmas 與靜態路由同層級

設定 Vue Router 讓巢狀路由的 parmas 與靜態路由同層級

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 截胡啦。

歡迎給我點鼓勵,讓我知道你來過 :)

1
MUKI says:

如果文章有幫助到你,歡迎分享給更多人知道。文章內容皆為 MUKI 本人的原創文章,我會經常更新文章以及修正錯誤內容,因此轉載時建議保留原出處,避免出現版本不一致或已過時的資訊。

本文地址:https://muki.tw/vue-router-params-path-same-level/ 已複製

Subscribe
Notify of
guest

0 則留言
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Copyright © since 2008 MUKI space* / omegaSS theme All Rights Reserved.