Vue Router之router.push和router.resolve頁面跳轉(zhuǎn)方式
更新時(shí)間：2025年04月08日 17:29:01 作者：?????呀呀
這篇文章主要介紹了Vue Router之router.push和router.resolve頁面跳轉(zhuǎn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
params和query傳參的區(qū)別
- params傳參只能通過 name 引入路由,如果寫成path:‘/xxx’,獲取的參數(shù)是 undefined,獲取方式:route.params
- query傳參name和path二者都可正常獲取, 獲取方式route.query
- params相當(dāng)于post請(qǐng)求,參數(shù)不會(huì)顯示在地址欄; query相當(dāng)于get傳參,可以在地址欄看到參數(shù)
- 路由跳轉(zhuǎn)時(shí)推薦使用name的方式，因?yàn)槁窂娇赡軙?huì)變，但名字一般是由具體含義的，一般不會(huì)變，寫起來也簡(jiǎ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.idquery傳參
// 使用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é)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)星空效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
詳解Vue-cli webpack移動(dòng)端自動(dòng)化構(gòu)建rem問題
這篇文章主要介紹了詳解Vue-cli webpack移動(dòng)端自動(dòng)化構(gòu)建rem問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
這篇文章主要介紹了vue3 elementPlus部分組件樣式修改的方法,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-01-01
vue使用axios實(shí)現(xiàn)文件上傳進(jìn)度的實(shí)時(shí)更新詳解
最近在學(xué)習(xí)axios，然后項(xiàng)目就用到了，所以這篇文章主要給大家介紹了關(guān)于vue中利用axios實(shí)現(xiàn)文件上傳進(jìn)度的實(shí)時(shí)更新的相關(guān)資料，文中先對(duì)axios進(jìn)行了簡(jiǎn)單的介紹，方法大家理解學(xué)習(xí)，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
Vue無法訪問.env.development定義的變量值問題及解決
這篇文章主要介紹了Vue無法訪問.env.development定義的變量值問題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
計(jì)算屬性用于處理復(fù)雜的業(yè)務(wù)邏輯,vue提供了檢測(cè)數(shù)據(jù)變化的一個(gè)屬性watch可以通過newVal獲取變化之后的值,這篇文章主要給大家介紹了關(guān)于Vue中計(jì)算屬性和屬性偵聽的相關(guān)資料,需要的朋友可以參考下2021-10-10
elementUI實(shí)現(xiàn)下拉選項(xiàng)加多選框的示例代碼
因產(chǎn)品需求和UI樣式調(diào)整，本文主要實(shí)現(xiàn)elementUI下拉選項(xiàng)加多選框的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
Vue 實(shí)現(xiàn)登錄界面驗(yàn)證碼功能
本文通過實(shí)例代碼給大家介紹了Vue 實(shí)現(xiàn)登錄界面 驗(yàn)證碼功能，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01
這篇文章主要介紹了vue中的provide / inject 有什么用處,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-11-11
之前對(duì)于vue中用到過的checkbox也只是別人寫好的組件，這次在自己實(shí)現(xiàn)時(shí)走了很多坑，特意寫這篇文章記錄到腳本之家平臺(tái)，供大家參考2018-11-11