vue如何通過params和query傳值(刷新不丟失)
vue通過路由傳值
在許多跳轉(zhuǎn)的同時需要完成攜帶參數(shù)，并且在刷新的同時不丟失參數(shù)。
$router：是路由操作對象，只寫對象
$route：路由信息對象，只讀對象
一. 通過query傳遞參數(shù)刷新不丟失參數(shù)
在需要傳值的頁面：
this.$router.push({
path: '/tasks',//通過path跳轉(zhuǎn)
query: {
id : id,
formId : formId
}
})
設(shè)置的router:
{
path: '/tasks',
name: 'tasks-detail',
component: () => import('@/views/todo/detail.vue')
},
在地址欄便會是這樣的格式顯示出參數(shù)，很像get請求的形式
通過在跳轉(zhuǎn)的頁面運(yùn)用this.$route的方法得到傳參
因?yàn)榇娣旁诘刂窓谒运⑿乱矔ㄟ^this.$route拿到。
二. 通過params傳遞參數(shù)刷新不丟失參數(shù)
如果要做到刷新不還能獲取，其實(shí)也是在地址欄另一形式的存參在需要傳值的頁面：
this.$router.push({
path : `/tasks/${item.id}/${item.formId}`,
})
設(shè)置的router:
{
path: '/tasks/:id/:formId',
name: 'tasks-detail',
component: () => import('@/views/todo/detail.vue')
},
在地址欄便會是這樣的格式顯示出參數(shù),一一對應(yīng)
同樣也刷新不會改變，如果是通過params傳參的形式刷新參數(shù)便會丟失,類似下面這種
path:'/tasks',
params: {
id : item.id,
formId : item.formId
}
三. 同時使用params和query傳遞參數(shù)刷新不丟失參數(shù)
如果要做到刷新不還能獲取，同樣也是地址欄另一形式的存參在需要傳值的頁面：
this.$router.push({
path: '/tasks/' + item.id,
query: {
formId : item.formId
},
})
設(shè)置的router:
{
path: '/tasks/:taskId',
name: 'tasks-detail',
props: (route) => ({ ...route.query, ...route.params }),//可以運(yùn)用props結(jié)合擴(kuò)展運(yùn)算符獲取參數(shù)
component: () => import('@/views/todo/detail.vue')
},
在地址欄便會是這樣的格式顯示出參數(shù)
同樣也刷新不會改變,地址欄更能看出結(jié)合版，這種混合運(yùn)用利用props更方便接收值
總的來說
1.如果需要做到刷新不丟失參數(shù)和值必須通過地址欄
2.query傳參地址更像是get請求的格式
3.params如果需要刷新不丟是直接在path上對應(yīng)形式傳參，不能通過params的對象傳參
4.結(jié)合使用可以通過props更好的接收參數(shù)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3獲取元素并且修改元素樣式的實(shí)戰(zhàn)操作
ref作為在vue里面我們獲取元素最常用的一個api,在vue3迎來改造,下面這篇文章主要給大家介紹了關(guān)于vue3獲取元素并且修改元素樣式的相關(guān)資料,需要的朋友可以參考下2023-04-04
這篇文章主要為大家介紹了Vue?事件處理函數(shù)的綁定示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要為大家介紹了vue如何封裝一個高質(zhì)量的表單通用組件方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要介紹了Vue-CLI與Vuex使用方法,結(jié)合實(shí)例形式分析了Vue-CLI創(chuàng)建項(xiàng)目與Vuex相關(guān)概念、使用方法及操作注意事項(xiàng),需要的朋友可以參考下2020-01-01
Vue數(shù)組響應(yīng)式操作及高階函數(shù)使用代碼詳解
這篇文章主要介紹了Vue數(shù)組響應(yīng)式操作及高階函數(shù)使用代碼詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-08-08
vue+element-ui JYAdmin后臺管理系統(tǒng)模板解析
這篇文章主要介紹了vue+element-ui JYAdmin后臺管理系統(tǒng)模板解析，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
Vue3 的ref和reactive的用法和區(qū)別示例解析
ref和reactive是Vue3中用來實(shí)現(xiàn)數(shù)據(jù)響應(yīng)式的API,一般情況下,ref定義基本數(shù)據(jù)類型,reactive定義引用數(shù)據(jù)類型,本文給大家介紹Vue3 的ref和reactive的用法和區(qū)別,感興趣的朋友一起看看吧2023-10-10
封裝組件相信對大家來說都不陌生了,下面這篇文章主要給大家介紹了關(guān)于用VUE封裝一個文本滾動組件的相關(guān)資料,文中通過圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
Vue axios庫避免重復(fù)發(fā)送請求的示例介紹
Axios是一個基于promise的HTTP庫，可以用在瀏覽器和node.js中。axios是目前最優(yōu)秀的HTTP請求庫之一,我們封裝axios請求也是為了讓代碼看的更加清晰,后期好維護(hù)2023-02-02
Vue+Echart柱狀圖實(shí)現(xiàn)疫情數(shù)據(jù)統(tǒng)計
這篇文章主要介紹了在Vue nuxt項(xiàng)目中，如何使用Echart(百度圖表)柱狀圖來實(shí)現(xiàn)疫情數(shù)據(jù)統(tǒng)計，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2021-12-12