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