vue路由相對路徑跳轉方式
更新時間：2021年08月18日 10:32:34 投稿：jingxian
這篇文章主要介紹了vue路由相對路徑跳轉方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue路由相對路徑跳轉
今天寫東西遇到多層路由，路由之間跳轉時需要相對路徑，因此查了一下官網(wǎng)用到了append屬性和router.resolve方法，因此列出具體的使用方法。
1.append 屬性
設置 append 屬性后，則在當前 (相對) 路徑前添加基路徑。
類型：boolean
默認值：false
- 例如：我們從 /eth（基路徑）導航到一個相對路徑 /eth/block，/eth—>/eth/block，路由設置為block
- 如果添加了 append 屬性，則完整路徑為 /eth/block，
- 如果沒有，則完整路徑為 /block
如果當前路由為 /eth ，跳到子級 /eth/block
<router-link to="block" append> /eth =====> /eth/block </router-link>
如果當前路由為 /eth/login ，跳到同級的/eth/block
<router-link to="../block" append> /eth/login =====> /eth/block </router-link>
如果當前路由為 /eth/block ，回到上級/eth
<router-link to="../" append> /eth/block =====> /eth </router-link>
2.router.resolve方法
router.resolve(location, current?, append?)
返回值：路由對象
- 解析目標位置 (格式和 <router-link> 的 to prop 一樣)。
- current 是當前默認的路由 (通常你不需要改變它)
- append 允許你在 current 路由上附加路徑 (如同 router-link)
export default {
mounted() {
//獲取即將跳轉的路由對象
let routeObj = this.$router.resolve({
path: '../'
},
this.$route,
"append"
);
//打印查看路由對象
console.log(routeObj);
//路由跳轉
this.$router.push({
path: routeObj.route.path,
query: { //通過此方式傳參
id: this.id
}
});
}
}
vue router動態(tài)路由點擊跳轉路徑地址重復追加
在練習寫vue router動態(tài)路由時碰到的問題
點擊多次時，地址欄不斷增加重復。
查看代碼發(fā)現(xiàn)是頁面中相對路徑最前面少了 ‘ / '；添加上就能正常顯示了。
如下：
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Vue動態(tài)創(chuàng)建注冊component的實例代碼
這篇文章主要給大家介紹了關于Vue動態(tài)創(chuàng)建注冊component的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用Vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-06-06
這篇文章主要介紹了Element PageHeader頁頭的使用方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
antd design table更改某行數(shù)據(jù)的樣式操作
這篇文章主要介紹了antd design table更改某行數(shù)據(jù)的樣式操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了vue的代理配置pathRewrite重寫不生效問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue如何實現(xiàn)二進制流文件導出excel，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了uniapp仿微信聊天界面的相關資料,這里提及了一個時間工具包timeMethod.js,該工具包可能提供了一系列時間處理的功能,如格式化日期、計算時間差等,以便在消息格式中正確展示時間信息,使用此類工具包可以大大提高開發(fā)效率,需要的朋友可以參考下2024-10-10
今天小編就為大家分享一篇vue 2.8.2版本配置剛進入時候的默認頁面方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue3之getCurrentInstance與ts結合使用的方式
這篇文章主要介紹了Vue3之getCurrentInstance與ts結合使用的方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue.js允許自定義過濾器，過濾器的作用可被用于一些常見的文本格式化（也就是修飾文本，但是文本內容不會改變），本文主要來和大家講講過濾器filters的使用，感興趣的可以了解一下2023-04-04
vue中的.capture和.self區(qū)分及初步理解
這篇文章主要介紹了vue中的.capture和.self區(qū)分及初步理解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04