vue路由傳參之使用query傳參頁(yè)面刷新數(shù)據(jù)丟失問(wèn)題解析
更新時(shí)間：2023年04月14日 14:53:28 作者：無(wú)·糖
這篇文章主要介紹了vue路由傳參使用query傳參頁(yè)面刷新數(shù)據(jù)丟失問(wèn)題,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
vue路由傳參（使用query傳參頁(yè)面刷新數(shù)據(jù)丟失問(wèn)題）
1. 路由傳參的兩種方式
1. params傳參（刷新頁(yè)面數(shù)據(jù)會(huì)丟失）
this.$router.push({
name:'xxx',
params:{
id:id
}
})
//接收參數(shù):
this.$route.params.id2. query傳參（刷新數(shù)據(jù)不會(huì)丟失）
this.$router.push({
path:'/xxx',
query:{
id:id
}
})
//接收參數(shù):
this.$route.query.id2. 使用query傳參頁(yè)面刷新數(shù)據(jù)丟失問(wèn)題
注意
在query傳參的時(shí)候可能會(huì)遇到一個(gè)問(wèn)題：當(dāng)傳遞參數(shù)為對(duì)象時(shí)，第一次跳轉(zhuǎn)數(shù)據(jù)是沒(méi)問(wèn)題的，但第二次刷新頁(yè)面數(shù)據(jù)會(huì)變?yōu)閇object object]
解決辦法：
要跳轉(zhuǎn)的傳參頁(yè)：先將數(shù)組轉(zhuǎn)換為字符串。
detailFun(row) {
//console.log(JSON.stringify(row))
this.$router.push({
path: '/product',
query: { productDetail: JSON.stringify(row) }
})
},接收頁(yè)面：
created() {
this.orderDetail = JSON.parse(this.$route.query.productDetail)
}這樣轉(zhuǎn)換一下刷新后數(shù)據(jù)就不會(huì)丟失。
到此這篇關(guān)于vue路由傳參（使用query傳參頁(yè)面刷新數(shù)據(jù)丟失問(wèn)題）的文章就介紹到這了,更多相關(guān)vue路由傳參內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了 vue3 自定義指令詳情，自定義指令分為全局和局部?jī)煞N類(lèi)型，大家并不陌生。今天我們就講講在 vue3 中，自定義指令定義、使用以及鉤子函數(shù)都有哪些變化？,需要的朋友可以參考一下2021-11-11
這篇文章主要為大家詳細(xì)介紹了vue自定義氣泡彈窗，包含css晃動(dòng)動(dòng)畫(huà)shake制作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要介紹了Vue extend的基本用法,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-12-12
詳解vue beforeEach 死循環(huán)問(wèn)題解決方法
這篇文章主要介紹了vue beforeEach 死循環(huán)問(wèn)題解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
這篇文章主要為大家介紹了Vue2.0生命周期，思考與理解“el被新創(chuàng)建的vm.$el替換”這句話(huà)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-08-08
vue.js相比于Angular.js，Vue.js提供了更加簡(jiǎn)潔、更易于理解的API，使得我們能夠快速地上手并使用Vue.js。下面通過(guò)本文給大家分享vue.js語(yǔ)法及常用指令，希望對(duì)大家有所幫助2017-10-10
詳解vue-cli項(xiàng)目中用json-sever搭建mock服務(wù)器
這篇文章主要介紹了詳解vue-cli項(xiàng)目中用json-sever搭建mock服務(wù)器，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
這篇文章主要介紹了Vue中使用插槽（slot）、聚類(lèi)插槽，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue 實(shí)現(xiàn)拖拽動(dòng)態(tài)生成組件的需求
這篇文章主要介紹了vue 如何實(shí)現(xiàn)拖拽動(dòng)態(tài)生成組件的需求，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-05-05
Vue3數(shù)字滾動(dòng)插件vue-countup-v3的使用
vue-countup-v3 插件是一個(gè)基于 Vue3 的數(shù)字動(dòng)畫(huà)插件，用于在網(wǎng)站或應(yīng)用程序中創(chuàng)建帶有數(shù)字動(dòng)畫(huà)效果的計(jì)數(shù)器，本文主要介紹了Vue3數(shù)字滾動(dòng)插件vue-countup-v3的使用，感興趣的可以了解一下2023-10-10