建站
咨詢
售后
建站咨詢
新聞中心
這篇文章給大家分享的是有關(guān)Vue中路由跳轉(zhuǎn)的示例分析的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。
成都創(chuàng)新互聯(lián)公司長期為上千余家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為微山企業(yè)提供專業(yè)的網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站制作，微山網(wǎng)站改版等技術(shù)服務(wù)。擁有10余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。
最近項(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ì)改變。
感謝各位的閱讀！關(guān)于“Vue中路由跳轉(zhuǎn)的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
當(dāng)前文章：Vue中路由跳轉(zhuǎn)的示例分析
網(wǎng)頁路徑：http://www.dlmjj.cn/article/ppdspc.html
