vue路由相對(duì)路徑跳轉(zhuǎn)方式

更新時(shí)間：2021年08月18日 10:32:34 投稿：jingxian

這篇文章主要介紹了vue路由相對(duì)路徑跳轉(zhuǎn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue路由相對(duì)路徑跳轉(zhuǎn)

今天寫東西遇到多層路由，路由之間跳轉(zhuǎn)時(shí)需要相對(duì)路徑，因此查了一下官網(wǎng)用到了append屬性和router.resolve方法，因此列出具體的使用方法。

1.append 屬性

設(shè)置 append 屬性后，則在當(dāng)前 (相對(duì)) 路徑前添加基路徑。

類型：boolean

默認(rèn)值：false

例如：我們從 /eth（基路徑）導(dǎo)航到一個(gè)相對(duì)路徑 /eth/block，/eth—>/eth/block，路由設(shè)置為block
如果添加了 append 屬性，則完整路徑為 /eth/block，
如果沒有，則完整路徑為 /block

如果當(dāng)前路由為 /eth ，跳到子級(jí) /eth/block

<router-link to="block" append> 
 /eth =====> /eth/block  
</router-link>

如果當(dāng)前路由為 /eth/login ，跳到同級(jí)的/eth/block

<router-link to="../block" append>
 /eth/login =====> /eth/block 
</router-link>

如果當(dāng)前路由為 /eth/block ，回到上級(jí)/eth

<router-link to="../" append>
 /eth/block =====> /eth 
</router-link>

2.router.resolve方法

router.resolve(location, current?, append?)

返回值：路由對(duì)象

解析目標(biāo)位置 (格式和 <router-link> 的 to prop 一樣)。
current 是當(dāng)前默認(rèn)的路由 (通常你不需要改變它)
append 允許你在 current 路由上附加路徑 (如同 router-link)

export default {
  mounted() {
    //獲取即將跳轉(zhuǎn)的路由對(duì)象
    let routeObj = this.$router.resolve({
        path: '../'
      },
      this.$route,
      "append"
    );
    //打印查看路由對(duì)象
    console.log(routeObj);
    //路由跳轉(zhuǎn)
    this.$router.push({
      path: routeObj.route.path,
      query: { //通過此方式傳參
  id: this.id 
   }
    });
  }
}

vue router動(dòng)態(tài)路由點(diǎn)擊跳轉(zhuǎn)路徑地址重復(fù)追加

在練習(xí)寫vue router動(dòng)態(tài)路由時(shí)碰到的問題

點(diǎn)擊多次時(shí)，地址欄不斷增加重復(fù)。

在這里插入圖片描述

查看代碼發(fā)現(xiàn)是頁(yè)面中相對(duì)路徑最前面少了 ‘ / '；添加上就能正常顯示了。

如下：

在這里插入圖片描述

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

使用vis-timeline繪制甘特圖并實(shí)現(xiàn)時(shí)間軸的中文化(案例代碼)
這篇文章主要介紹了使用vis-timeline繪制甘特圖并實(shí)現(xiàn)時(shí)間軸的中文化(案例代碼),本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-02-02
vue-cli 目錄結(jié)構(gòu)詳細(xì)講解總結(jié)
這篇文章主要介紹了vue-cli 目錄結(jié)構(gòu)詳細(xì)講解總結(jié)，詳細(xì)的介紹了整個(gè)項(xiàng)目的目錄以及目錄文件的用法，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2019-01-01
Vue實(shí)現(xiàn)時(shí)間軸功能
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)時(shí)間軸功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-02-02
Vue.js系列之項(xiàng)目搭建(1)
今天要講講Vue2.0了。最近將公司App3.0用vue2.0構(gòu)建了一個(gè)web版，因?yàn)槭堑谝淮问褂胿ue，而且一開始使用的時(shí)候2.0出來一個(gè)月不到，很多坑都是自己去踩的，現(xiàn)在項(xiàng)目要上線了，所以記錄一些過程
2017-01-01
vue如何調(diào)用攝像頭實(shí)現(xiàn)拍照上傳圖片、本地上傳圖片
這篇文章主要給大家介紹了關(guān)于vue如何調(diào)用攝像頭實(shí)現(xiàn)拍照上傳圖片、本地上傳圖片的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2023-07-07
vue3?父子組件間相互傳值方式
這篇文章主要介紹了vue3?父子組件間相互傳值方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
Vue CLI3搭建的項(xiàng)目中路徑相關(guān)問題的解決
這篇文章主要介紹了Vue CLI3搭建的項(xiàng)目中路徑相關(guān)問題的解決，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-09-09
vue跳轉(zhuǎn)同一路由報(bào)錯(cuò)的問題及解決
這篇文章主要介紹了vue跳轉(zhuǎn)同一路由報(bào)錯(cuò)的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
vue-cli 打包使用history模式的后端配置實(shí)例
今天小編就為大家分享一篇vue-cli 打包使用history模式的后端配置實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
詳解如何使用vue實(shí)現(xiàn)頁(yè)面訪問攔截
這篇文章主要為大家詳細(xì)介紹了如何使用vue實(shí)現(xiàn)頁(yè)面訪問攔截功能，文中的示例代碼講解詳細(xì)，具有一定的參考價(jià)值，需要的可以了解一下
2023-08-08