vue3路由跳轉(zhuǎn)params傳參接收不到的解決辦法
更新時間：2023年06月30日 11:22:40 作者：wyy愛學(xué)習(xí)
這篇文章主要給大家介紹了關(guān)于vue3路由跳轉(zhuǎn)params傳參接收不到的解決辦法,Vue3是目前前端開發(fā)中非常流行的框架之一,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
一、之前的用法
import { useRouter } from "vue-router";
const router = useRouter();
// 提現(xiàn)記錄
const withdrawalClick = (item) => {
router.push({ name: "Devwithdrawal", params: { name: 123 } });
};
//跳轉(zhuǎn)頁面接收參數(shù)
import { useRoute } from "vue-router";
const route = useRoute();
console.log(route.params);這樣路由可以跳轉(zhuǎn)過去，但接收到了params是一個空對象。
二、解決方法
通過查找資料，發(fā)現(xiàn)了原因。
https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22
由于之前的params傳參在頁面刷新之后，參數(shù)會丟失，所以vue將這種方法移除了。
vue推薦的路由跳轉(zhuǎn)傳參方法：
1.使用query傳遞參數(shù)
2.使用vuex、pinia對參數(shù)進(jìn)行存儲
3.使用 History API 方式傳遞和接收
const router = useRouter();
// 提現(xiàn)記錄
const withdrawalClick = (item) => {
router.push({
name: "Devwithdrawal",
state: { obj1: { name: 1 }, obj2: { name: 2 } },
});
};
// 收益記錄
const revenueClick = (item) => {
router.push({
name: "Devwithdrawal",
state: { obj3: { name: 3 } },
});
};
//跳轉(zhuǎn)頁面接受參數(shù)
console.log(history.state);
總結(jié)
到此這篇關(guān)于vue3路由跳轉(zhuǎn)params傳參接收不到的解決辦法的文章就介紹到這了,更多相關(guān)vue3路由跳轉(zhuǎn)params傳參內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了TypeScript踩坑之TS7053的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了element-ui?table表格底部合計自定義配置過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這些年寫前端vue時經(jīng)常碰到虛擬DOM這個單詞，但都是聽到就算了，左耳進(jìn)右耳出，知道有這么個東西就完了，因為感覺也沒有影響我實現(xiàn)公司的產(chǎn)品業(yè)務(wù)邏輯。今天在這里想花點時間探討下虛擬DOM相關(guān)的知識，給自己補補課2022-10-10
在現(xiàn)代前端開發(fā)中,Vue.js 來作為一個流行的 JavaScript 框架,提供了簡單易用的 API 和強大的功能,在 Vue 3 中,“Props”和“Emit”是兩個核心概念,本文將詳細(xì)探討這兩個概念的工作原理,并提供示例代碼以幫助更好地理解它們的使用,需要的朋友可以參考下2024-11-11
這篇文章主要為大家詳細(xì)介紹了vue的生命周期，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
本篇文章主要介紹了Vue中render函數(shù)的使用方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
本文主要介紹了Vue中this.$nextTick()的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
本文主要介紹了一文搞懂vue編譯器(DSL)原理，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
這篇文章主要介紹了vue2中如何使用swiper@5.4.5問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
uniapp微信小程序axios庫的封裝及使用詳細(xì)教程
這篇文章主要給大家介紹了關(guān)于uniapp微信小程序axios庫的封裝及使用的相關(guān)資料,Axios是一個基于promise網(wǎng)絡(luò)請求庫,作用于node.js和瀏覽器中axios-miniprogram-adapteraxios的小程序適配器,需要的朋友可以參考下2023-08-08