總結Vue路由跳轉問題的實例教程

這篇文章主要介紹了Vue路由跳轉問題記錄詳解，小編覺得蠻不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧

最近專案上需要用Vue用來做app，在Vue中使用路由時遇到下面的問題。

路由設定如下：

{

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個子位址，3個子位址層級為：LayoutList => LayoutView => LayoutDetail

##正常情況：假設目前路由為/tab/layoutList，需要跳到LayoutView頁面，可以透過router.push({path:'layoutView/'+item.id})

跳轉後的路由為/tab/layoutView/1

 

    

當我想要從LayoutView頁面跳到對應的LayoutDetail頁面：

情況一：（找不到頁面）

跳轉前位址：/tab/layoutView/1

跳到程式碼：router.push({path: 'layoutDetail/'+item.id});

跳轉後位址：/tab/layoutView/layoutDetail/27

情況二：（找不到頁面）

跳轉前位址：/tab/layoutView/1

跳到程式碼：router.push({path:'/layoutDetail/'+item.id});

跳轉後位址：/layoutDetail/27

情況三：（找不到頁面）

#跳轉前位址：/tab/layoutView/1

跳轉程式碼：router.push({path:'tab/layoutDetail/'+item.id});

跳轉後位址：/tab/layoutView/tab/layoutDetail/ 27

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

跳轉前位址：/tab/layoutView/1

跳到程式碼：router. push({path:'/tab/layoutDetail/'+item.id});

跳轉後位址：/tab/layoutDetail/27

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

vue路由會根據push的位址，如果位址不是/開頭，會直接取代目前路由的最後一個/後的位址，

#如果位址是/開頭，會以push的位址作為絕對地址進行跳轉。

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

以上是總結Vue路由跳轉問題的實例教程的詳細內容。更多資訊請關注PHP中文網其他相關文章！