vue3路由跳轉(zhuǎn)params傳參接收不到的解決辦法
更新時間：2023年06月30日 11:22:40 作者：wyy愛學(xué)習(xí)
這篇文章主要給大家介紹了關(guān)于vue3路由跳轉(zhuǎn)params傳參接收不到的解決辦法,Vue3是目前前端開發(fā)中非常流行的框架之一,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
一、之前的用法
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ù)進行存儲
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)文章
我們經(jīng)常在項目中會有支持pc與手機端需求,下面這篇文章主要給大家介紹了關(guān)于vue項目同時兼容pc和移動端的解決方式,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-10-10
Vue中axios的封裝（報錯、鑒權(quán)、跳轉(zhuǎn)、攔截、提示）
這篇文章主要介紹了Vue中axios的封裝（報錯、鑒權(quán)、跳轉(zhuǎn)、攔截、提示）,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-08-08
這篇文章主要介紹了vue-cli3項目打包后自動化部署到服務(wù)器的方法,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-09
本篇文章主要介紹了VUE axios發(fā)送跨域請求需要注意的問題，在實際項目中前端使用到vue，后端使用php進行開發(fā)。前端使用axios請求請求遇到的問題，有興趣的可以了解一下2017-07-07
vue+element-ui表格封裝tag標(biāo)簽使用插槽
這篇文章主要介紹了vue+element-ui表格封裝tag標(biāo)簽使用插槽，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
Vue數(shù)據(jù)變化監(jiān)聽錯誤的常見原因與解決方案
在?Vue.js?開發(fā)中,watch?是一個強大的工具,用于監(jiān)聽數(shù)據(jù)的變化并執(zhí)行相應(yīng)的操作,然而,許多開發(fā)者在使用?watch?時會遇到數(shù)據(jù)變化未被正確監(jiān)聽的問題,這可能導(dǎo)致程序邏輯錯誤或視圖更新失敗,本文將探討這些問題的常見原因,并提供相應(yīng)的解決方案,需要的朋友可以參考下2025-03-03
這篇文章主要為大家介紹了Vue首屏?xí)r間指標(biāo)采集最佳方式示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要介紹了webpack搭建vue環(huán)境時報錯異常解決,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了如何在Vue項目中使用vuex問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue源碼學(xué)習(xí)記錄之手寫vm.$mount方法
在我們開發(fā)中，經(jīng)常要用到Vue.extend創(chuàng)建出Vue的子類來構(gòu)造函數(shù)，通過new 得到子類的實例，然后通過$mount掛載到節(jié)點，今天通過本文給大家講解手寫vm.$mount方法 ，感興趣的朋友一起看看吧2022-11-11