最近項(xiàng)目上需要用Vue用來(lái)做app，在Vue中使用路由時(shí)遇到下面的問題。

路由設(shè)置如下：

{path:'/tab',component:Tab,children:[{path:'layoutList',name:'LayoutList',component:LayoutList},{path:'layoutView/:layoutId',name:'LayoutView',component:LayoutView},{path:'layoutDetail/:viewId',name:'LayoutDetail',component:LayoutDetail}]}

其中/tab是根地址，有3個(gè)子地址，3個(gè)子地址層級(jí)為：LayoutList => LayoutView => LayoutDetail

正常情況：假設(shè)當(dāng)前路由為/tab/layoutList，需要跳轉(zhuǎn)到LayoutView頁(yè)面，可以通過(guò)router.push({path:'layoutView/'+item.id})

跳轉(zhuǎn)后的路由為/tab/layoutView/1

當(dāng)我想從LayoutView頁(yè)面跳轉(zhuǎn)到對(duì)應(yīng)的LayoutDetail頁(yè)面時(shí)：

情況一：（找不到頁(yè)面）

跳轉(zhuǎn)前地址：/tab/layoutView/1

跳轉(zhuǎn)代碼：router.push({path:'layoutDetail/'+item.id});

跳轉(zhuǎn)后地址：/tab/layoutView/layoutDetail/27

情況二：（找不到頁(yè)面）

跳轉(zhuǎn)前地址：/tab/layoutView/1

跳轉(zhuǎn)代碼：router.push({path:'/layoutDetail/'+item.id});

跳轉(zhuǎn)后地址：/layoutDetail/27

情況三：（找不到頁(yè)面）

跳轉(zhuǎn)前地址：/tab/layoutView/1

跳轉(zhuǎn)代碼：router.push({path:'tab/layoutDetail/'+item.id});

跳轉(zhuǎn)后地址：/tab/layoutView/tab/layoutDetail/27

情況四：（頁(yè)面正常顯示）

跳轉(zhuǎn)前地址：/tab/layoutView/1

跳轉(zhuǎn)代碼：router.push({path:'/tab/layoutDetail/'+item.id});

跳轉(zhuǎn)后地址：/tab/layoutDetail/27

只有按照情況四的操作，才能正常顯示出來(lái)頁(yè)面。

vue路由會(huì)根據(jù)push的地址，如果地址不是/開頭，會(huì)直接替換當(dāng)前路由的最后一個(gè)/后的地址，

如果地址是/開頭，會(huì)以push的地址作為絕對(duì)地址進(jìn)行跳轉(zhuǎn)。

另外我嘗試還使用router.go({name:'LayoutDetail',params:{viewId:item.id}})，頁(yè)面不會(huì)跳轉(zhuǎn)且地址也不會(huì)改變。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。