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