vue路由相對路徑跳轉(zhuǎn)方式
更新時間：2021年08月18日 10:32:34 投稿：jingxian
這篇文章主要介紹了vue路由相對路徑跳轉(zhuǎn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue路由相對路徑跳轉(zhuǎn)
今天寫東西遇到多層路由，路由之間跳轉(zhuǎn)時需要相對路徑，因此查了一下官網(wǎng)用到了append屬性和router.resolve方法，因此列出具體的使用方法。
1.append 屬性
設(shè)置 append 屬性后，則在當(dāng)前 (相對) 路徑前添加基路徑。
類型：boolean
默認(rèn)值：false
- 例如：我們從 /eth（基路徑）導(dǎo)航到一個相對路徑 /eth/block，/eth—>/eth/block，路由設(shè)置為block
- 如果添加了 append 屬性，則完整路徑為 /eth/block，
- 如果沒有，則完整路徑為 /block
如果當(dāng)前路由為 /eth ，跳到子級 /eth/block
<router-link to="block" append> /eth =====> /eth/block </router-link>
如果當(dāng)前路由為 /eth/login ，跳到同級的/eth/block
<router-link to="../block" append> /eth/login =====> /eth/block </router-link>
如果當(dāng)前路由為 /eth/block ，回到上級/eth
<router-link to="../" append> /eth/block =====> /eth </router-link>
2.router.resolve方法
router.resolve(location, current?, append?)
返回值：路由對象
- 解析目標(biāo)位置 (格式和 <router-link> 的 to prop 一樣)。
- current 是當(dāng)前默認(rèn)的路由 (通常你不需要改變它)
- append 允許你在 current 路由上附加路徑 (如同 router-link)
export default {
mounted() {
//獲取即將跳轉(zhuǎn)的路由對象
let routeObj = this.$router.resolve({
path: '../'
},
this.$route,
"append"
);
//打印查看路由對象
console.log(routeObj);
//路由跳轉(zhuǎn)
this.$router.push({
path: routeObj.route.path,
query: { //通過此方式傳參
id: this.id
}
});
}
}
vue router動態(tài)路由點(diǎn)擊跳轉(zhuǎn)路徑地址重復(fù)追加
在練習(xí)寫vue router動態(tài)路由時碰到的問題
點(diǎn)擊多次時，地址欄不斷增加重復(fù)。
查看代碼發(fā)現(xiàn)是頁面中相對路徑最前面少了 ‘ / '；添加上就能正常顯示了。
如下：
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
使用vis-timeline繪制甘特圖并實(shí)現(xiàn)時間軸的中文化(案例代碼)
這篇文章主要介紹了使用vis-timeline繪制甘特圖并實(shí)現(xiàn)時間軸的中文化(案例代碼),本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-02-02
vue-cli 目錄結(jié)構(gòu)詳細(xì)講解總結(jié)
這篇文章主要介紹了vue-cli 目錄結(jié)構(gòu)詳細(xì)講解總結(jié)，詳細(xì)的介紹了整個項(xiàng)目的目錄以及目錄文件的用法，非常具有實(shí)用價值，需要的朋友可以參考下2019-01-01
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)時間軸功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
今天要講講Vue2.0了。最近將公司App3.0用vue2.0構(gòu)建了一個web版，因?yàn)槭堑谝淮问褂胿ue，而且一開始使用的時候2.0出來一個月不到，很多坑都是自己去踩的，現(xiàn)在項(xiàng)目要上線了，所以記錄一些過程2017-01-01
vue如何調(diào)用攝像頭實(shí)現(xiàn)拍照上傳圖片、本地上傳圖片
這篇文章主要給大家介紹了關(guān)于vue如何調(diào)用攝像頭實(shí)現(xiàn)拍照上傳圖片、本地上傳圖片的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue3?父子組件間相互傳值方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
Vue CLI3搭建的項(xiàng)目中路徑相關(guān)問題的解決
這篇文章主要介紹了Vue CLI3搭建的項(xiàng)目中路徑相關(guān)問題的解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue跳轉(zhuǎn)同一路由報錯的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
vue-cli 打包使用history模式的后端配置實(shí)例
今天小編就為大家分享一篇vue-cli 打包使用history模式的后端配置實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細(xì)介紹了如何使用vue實(shí)現(xiàn)頁面訪問攔截功能，文中的示例代碼講解詳細(xì)，具有一定的參考價值，需要的可以了解一下2023-08-08