Vue路由跳轉(zhuǎn)問題記錄詳解
最近項(xiàng)目上需要用Vue用來做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頁面，可以通過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ì)改變。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue中如何使用element的日歷組件，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-09-09
基于express中路由規(guī)則及獲取請(qǐng)求參數(shù)的方法
下面小編就為大家分享一篇基于express中路由規(guī)則及獲取請(qǐng)求參數(shù)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue使用keep-alive如何實(shí)現(xiàn)多頁簽并支持強(qiáng)制刷新
這篇文章主要介紹了vue使用keep-alive如何實(shí)現(xiàn)多頁簽并支持強(qiáng)制刷新，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue使用@scroll監(jiān)聽滾動(dòng)事件時(shí)，@scroll無效問題的解決方法詳解
這篇文章主要介紹了vue使用@scroll監(jiān)聽滾動(dòng)事件時(shí)，@scroll無效問題的解決方法,結(jié)合實(shí)例形式分析了@scroll監(jiān)聽滾動(dòng)事件無效問題的原因及相應(yīng)的解決方法,需要的朋友可以參考下2019-10-10
vue如何隨心所欲調(diào)整el-dialog中body的樣式
這篇文章主要介紹了vue如何隨心所欲調(diào)整el-dialog中body的樣式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
基于vue+echarts 數(shù)據(jù)可視化大屏展示的方法示例
這篇文章主要介紹了基于vue+echarts 數(shù)據(jù)可視化大屏展示的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2020-03-03
這篇文章主要介紹了Element Steps步驟條的使用方法,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
這篇文章主要介紹了TinyMCE富文本編輯器在Vue中的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
vue3 微信掃碼登錄及獲取個(gè)人信息實(shí)現(xiàn)的三種方法
本文主要介紹了vue3 微信掃碼登錄及獲取個(gè)人信息實(shí)現(xiàn)的三種方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
今天小編就為大家分享一篇解決vue 表格table列求和的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11