vue路由傳參之使用query傳參頁面刷新數(shù)據(jù)丟失問題解析
vue路由傳參(使用query傳參頁面刷新數(shù)據(jù)丟失問題)
1. 路由傳參的兩種方式
1. params傳參(刷新頁面數(shù)據(jù)會(huì)丟失)
this.$router.push({ name:'xxx', params:{ id:id } }) //接收參數(shù): this.$route.params.id
2. query傳參(刷新數(shù)據(jù)不會(huì)丟失)
this.$router.push({ path:'/xxx', query:{ id:id } }) //接收參數(shù): this.$route.query.id
2. 使用query傳參頁面刷新數(shù)據(jù)丟失問題
注意
在query傳參的時(shí)候可能會(huì)遇到一個(gè)問題:當(dāng)傳遞參數(shù)為對(duì)象時(shí),第一次跳轉(zhuǎn)數(shù)據(jù)是沒問題的,但第二次刷新頁面數(shù)據(jù)會(huì)變?yōu)閇object object]
解決辦法:
要跳轉(zhuǎn)的傳參頁:先將數(shù)組轉(zhuǎn)換為字符串。
detailFun(row) { //console.log(JSON.stringify(row)) this.$router.push({ path: '/product', query: { productDetail: JSON.stringify(row) } }) },
接收頁面:
created() { this.orderDetail = JSON.parse(this.$route.query.productDetail) }
這樣轉(zhuǎn)換一下刷新后數(shù)據(jù)就不會(huì)丟失。
到此這篇關(guān)于vue路由傳參(使用query傳參頁面刷新數(shù)據(jù)丟失問題)的文章就介紹到這了,更多相關(guān)vue路由傳參內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
詳解vue beforeEach 死循環(huán)問題解決方法
這篇文章主要介紹了vue beforeEach 死循環(huán)問題解決方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02詳解vue-cli項(xiàng)目中用json-sever搭建mock服務(wù)器
這篇文章主要介紹了詳解vue-cli項(xiàng)目中用json-sever搭建mock服務(wù)器,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11vue 實(shí)現(xiàn)拖拽動(dòng)態(tài)生成組件的需求
這篇文章主要介紹了vue 如何實(shí)現(xiàn)拖拽動(dòng)態(tài)生成組件的需求,幫助大家更好的理解和學(xué)習(xí)使用vue框架,感興趣的朋友可以了解下2021-05-05Vue3數(shù)字滾動(dòng)插件vue-countup-v3的使用
vue-countup-v3 插件是一個(gè)基于 Vue3 的數(shù)字動(dòng)畫插件,用于在網(wǎng)站或應(yīng)用程序中創(chuàng)建帶有數(shù)字動(dòng)畫效果的計(jì)數(shù)器,本文主要介紹了Vue3數(shù)字滾動(dòng)插件vue-countup-v3的使用,感興趣的可以了解一下2023-10-10