Vue Router之router.push和router.resolve頁面跳轉(zhuǎn)方式

更新時間：2025年04月08日 17:29:01 作者：?????呀呀

這篇文章主要介紹了Vue Router之router.push和router.resolve頁面跳轉(zhuǎn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

params和query傳參的區(qū)別

params傳參只能通過 name 引入路由,如果寫成path:‘/xxx’,獲取的參數(shù)是 undefined,獲取方式:route.params
query傳參name和path二者都可正常獲取, 獲取方式route.query
params相當(dāng)于post請求,參數(shù)不會顯示在地址欄; query相當(dāng)于get傳參,可以在地址欄看到參數(shù)
路由跳轉(zhuǎn)時推薦使用name的方式，因?yàn)槁窂娇赡軙?，但名字一般是由具體含義的，一般不會變，寫起來也簡單一些

強(qiáng)調(diào): 使用params傳參必須通過name引入,不能通過path引入

params傳參

// 使用params傳參,使用name
router.push({
name: 'Login',
params: {
id: '2022-10-13'
}
})
// 獲取參數(shù)
let id = route.params.id

query傳參

// 使用query傳參,通過name和path都能獲取
router.push({
path: '/Home',
query: {
name: '我是通過url傳遞參數(shù)的'
}
})
// 獲取參數(shù)
let name = route.query.name

打開方式

router.push 只能當(dāng)前窗口打開
router.resolve 結(jié)合 window.open 可以新窗口打開

參數(shù)傳遞

router.push 支持query和params
router.resolve 只支持query，若需地址欄參數(shù)不可見，需結(jié)合localStorage/sessionStorage或第三方插件保存

示例

router.push

// 地址欄里帶參
router.push({
path: '這里是path',
query: {
a: 1,
},
});

// 地址欄里不帶參
router.push({
name: '這里是name',
params: {
a: 1,
},
});

router.resolve

// 地址欄里帶參
let data = router.resolve({
path: "/channel",// 或者 name: 'channel',
query: {
a: 1,
},
});
window.open(data.href, '_blank');

// 地址欄里不帶參
let data = router.resolve({
name: 'channel',
});
localStorage.setItem('a', 1);
// 然后跳轉(zhuǎn)頁接收 localStorage.getItem('a');

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

element?實(shí)現(xiàn)導(dǎo)航欄收起展開功能及思路
這篇文章主要介紹了element?實(shí)現(xiàn)導(dǎo)航欄收起展開功能，實(shí)現(xiàn)思路先給 el-menu加上 :collapse="isCollapse" 屬性，這個屬性也是 element 上的一個參數(shù)，意思為是否開啟折疊動畫，在 data 中定義 isCollapse ，用 true 和 false 控制展開與收起，需要的朋友可以參考下
2023-01-01
vue實(shí)現(xiàn)動態(tài)添加元素(可刪除)
文章介紹了如何在Vue中動態(tài)添加和刪除元素,通過使用Vue的響應(yīng)式數(shù)據(jù)和v-for指令,可以輕松地實(shí)現(xiàn)這一功能,文章還詳細(xì)講解了如何處理元素的添加和刪除事件,以及如何更新視圖以反映這些變化
2024-12-12
Vue中點(diǎn)擊active并第一個默認(rèn)選中功能的實(shí)現(xiàn)
這篇文章主要介紹了Vue中點(diǎn)擊active并第一個默認(rèn)選中功能的實(shí)現(xiàn)代碼，代碼簡單易懂，非常不錯具有一定的參考借鑒價值,需要的朋友可以參考下
2020-02-02
Vue消息提示this.$message方法使用解讀
這篇文章主要介紹了Vue消息提示this.$message方法使用,具有很好的參考價值,希望對大家有所幫助,
2023-09-09
vue自定義插件封裝，實(shí)現(xiàn)簡易的elementUi的Message和MessageBox的示例
這篇文章主要介紹了vue自定義插件封裝，實(shí)現(xiàn)簡易的elementUi的Message和MessageBox的示例，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2020-11-11
vue3表單輸入綁定方式
這篇文章主要介紹了vue3表單輸入綁定方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-07-07
Vue全家桶入門基礎(chǔ)教程
Vue 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架，和React，都自稱自己只關(guān)注視圖層，全家桶對于開發(fā)一個完整的中大型單頁面應(yīng)用項(xiàng)目所必須的所必須的插件和框架，本文給大家分享Vue全家桶入門基礎(chǔ)教程，感興趣的朋友一起看看吧
2021-05-05
解決Vue2?axios發(fā)請求報400錯誤"Error:?Request?failed?with?s
這篇文章主要給大家介紹了關(guān)于如何解決Vue2?axios發(fā)請求報400錯誤"Error:?Request?failed?with?status?code?400"的相關(guān)資料,在Vue應(yīng)用程序中我們通常會使用axios作為網(wǎng)絡(luò)請求庫,需要的朋友可以參考下
2023-07-07
使用vue-cli腳手架工具搭建vue-webpack項(xiàng)目
這篇文章主要介紹了使用vue-cli腳手架工具搭建vue-webpack項(xiàng)目，通過幾個默認(rèn)的步驟幫助你快速的構(gòu)建Vue.js項(xiàng)目。非常具有實(shí)用價值，需要的朋友可以參考下
2019-01-01
vue中用動態(tài)組件實(shí)現(xiàn)選項(xiàng)卡切換效果
本篇文章主要介紹了vue中用動態(tài)組件實(shí)現(xiàn)選項(xiàng)卡切換效果，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-03-03