總結(jié)Vue路由跳轉(zhuǎn)問題的實(shí)例教程

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

路由設(shè)置如下：

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

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

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

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

情況一：（找不到頁面）

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

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

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

情況二：（找不到頁面）

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

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

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

情況三：（找不到頁面）

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

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

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

情況四：（頁面正常顯示）

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

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

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

只有按照情況四的操作，才能正常顯示出來頁面。

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

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

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

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com