這篇文章給大家分享的是有關(guān)Vue中路由跳轉(zhuǎn)的示例分析的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),永泰企業(yè)網(wǎng)站建設(shè),永泰品牌網(wǎng)站建設(shè),網(wǎng)站定制,永泰網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷(xiāo),網(wǎng)絡(luò)優(yōu)化,永泰網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M(mǎn)足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專(zhuān)業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶(hù)成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

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

路由設(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的地址，如果地址不是/開(kāi)頭，會(huì)直接替換當(dāng)前路由的最后一個(gè)/后的地址，

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

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

感謝各位的閱讀！關(guān)于“Vue中路由跳轉(zhuǎn)的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線(xiàn)，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

當(dāng)前標(biāo)題：Vue中路由跳轉(zhuǎn)的示例分析-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)路徑：http://weahome.cn/article/dcjgss.html