vue如何通過params和query傳值(刷新不丟失)
vue通過路由傳值
在許多跳轉(zhuǎn)的同時(shí)需要完成攜帶參數(shù)，并且在刷新的同時(shí)不丟失參數(shù)。
$router：是路由操作對(duì)象，只寫對(duì)象
$route：路由信息對(duì)象，只讀對(duì)象
一. 通過query傳遞參數(shù)刷新不丟失參數(shù)
在需要傳值的頁(yè)面：
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')
},
在地址欄便會(huì)是這樣的格式顯示出參數(shù)，很像get請(qǐng)求的形式
通過在跳轉(zhuǎn)的頁(yè)面運(yùn)用this.$route的方法得到傳參
因?yàn)榇娣旁诘刂窓谒运⑿乱矔?huì)通過this.$route拿到。
二. 通過params傳遞參數(shù)刷新不丟失參數(shù)
如果要做到刷新不還能獲取，其實(shí)也是在地址欄另一形式的存參在需要傳值的頁(yè)面：
this.$router.push({
path : `/tasks/${item.id}/${item.formId}`,
})
設(shè)置的router:
{
path: '/tasks/:id/:formId',
name: 'tasks-detail',
component: () => import('@/views/todo/detail.vue')
},
在地址欄便會(huì)是這樣的格式顯示出參數(shù),一一對(duì)應(yīng)
同樣也刷新不會(huì)改變，如果是通過params傳參的形式刷新參數(shù)便會(huì)丟失,類似下面這種
path:'/tasks',
params: {
id : item.id,
formId : item.formId
}
三. 同時(shí)使用params和query傳遞參數(shù)刷新不丟失參數(shù)
如果要做到刷新不還能獲取，同樣也是地址欄另一形式的存參在需要傳值的頁(yè)面：
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')
},
在地址欄便會(huì)是這樣的格式顯示出參數(shù)
同樣也刷新不會(huì)改變,地址欄更能看出結(jié)合版，這種混合運(yùn)用利用props更方便接收值
總的來說
1.如果需要做到刷新不丟失參數(shù)和值必須通過地址欄
2.query傳參地址更像是get請(qǐng)求的格式
3.params如果需要刷新不丟是直接在path上對(duì)應(yīng)形式傳參，不能通過params的對(duì)象傳參
4.結(jié)合使用可以通過props更好的接收參數(shù)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue中如何設(shè)置全局的cookie對(duì)象，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家詳細(xì)介紹了VUE實(shí)現(xiàn)圖片驗(yàn)證碼功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
文章主要介紹了Vue3中的響應(yīng)式數(shù)據(jù)處理機(jī)制,包括ref和reactive函數(shù)的使用,它們的區(qū)別,以及如何使用watch和watchEffect來監(jiān)聽數(shù)據(jù)變化,文章最后提到了Vue3的生命周期鉤子和自定義hooks的概念,感興趣的朋友跟隨小編一起看看吧2024-11-11
defineProperty和Proxy基礎(chǔ)功能及性能對(duì)比
這篇文章主要為大家介紹了defineProperty和Proxy基礎(chǔ)功能及性能對(duì)比，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要介紹了vue關(guān)于Promise的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要為大家介紹了Vue之生命周期函數(shù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
介紹了如何在Vue項(xiàng)目中使用Axios封裝請(qǐng)求、配置攔截器,并在api.js中統(tǒng)一管理API接口,同時(shí),也講解了如何在vite.config.js中配置解決跨域問題,這些操作可以優(yōu)化前端代碼結(jié)構(gòu),提高開發(fā)效率2024-09-09
本篇文章主要介紹了VUE頁(yè)面中加載外部HTML的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
vue項(xiàng)目使用lodash節(jié)流防抖函數(shù)問題解決方案
在lodash函數(shù)工具庫(kù)中，防抖 _.debounce 和節(jié)流 _.throttle 函數(shù)在一些頻繁觸發(fā)的事件中比較常用，這篇文章主要介紹了vue項(xiàng)目使用lodash節(jié)流防抖函數(shù)問題與解決,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了vue-cli隨機(jī)生成port源碼的方法，文中給大家介紹了vue 隨機(jī)色生成方法,需要的朋友可以參考下2019-09-09