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)是頁面中相對(duì)路徑最前面少了 ‘ / '；添加上就能正常顯示了。

如下：

在這里插入圖片描述

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

您可能感興趣的文章:

相關(guān)文章

Vue動(dòng)態(tài)創(chuàng)建注冊component的實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于Vue動(dòng)態(tài)創(chuàng)建注冊component的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-06-06
Element PageHeader頁頭的使用方法
這篇文章主要介紹了Element PageHeader頁頭的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07
antd design table更改某行數(shù)據(jù)的樣式操作
這篇文章主要介紹了antd design table更改某行數(shù)據(jù)的樣式操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-10-10
vue的代理配置pathRewrite重寫不生效問題及解決
這篇文章主要介紹了vue的代理配置pathRewrite重寫不生效問題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue如何實(shí)現(xiàn)二進(jìn)制流文件導(dǎo)出excel
這篇文章主要介紹了vue如何實(shí)現(xiàn)二進(jìn)制流文件導(dǎo)出excel，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
uniapp仿微信聊天界面效果實(shí)例(vue3組合式版本)
這篇文章主要介紹了uniapp仿微信聊天界面的相關(guān)資料,這里提及了一個(gè)時(shí)間工具包timeMethod.js,該工具包可能提供了一系列時(shí)間處理的功能,如格式化日期、計(jì)算時(shí)間差等,以便在消息格式中正確展示時(shí)間信息,使用此類工具包可以大大提高開發(fā)效率,需要的朋友可以參考下
2024-10-10
vue 2.8.2版本配置剛進(jìn)入時(shí)候的默認(rèn)頁面方法
今天小編就為大家分享一篇vue 2.8.2版本配置剛進(jìn)入時(shí)候的默認(rèn)頁面方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
Vue3之getCurrentInstance與ts結(jié)合使用的方式
這篇文章主要介紹了Vue3之getCurrentInstance與ts結(jié)合使用的方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
一文詳解Vue中過濾器filters的使用
Vue.js允許自定義過濾器，過濾器的作用可被用于一些常見的文本格式化（也就是修飾文本，但是文本內(nèi)容不會(huì)改變），本文主要來和大家講講過濾器filters的使用，感興趣的可以了解一下
2023-04-04
vue中的.capture和.self區(qū)分及初步理解
這篇文章主要介紹了vue中的.capture和.self區(qū)分及初步理解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04