Vue3使用router,params傳參為空問題
更新時間：2025年04月08日 15:20:59 作者：?????呀呀
這篇文章主要介紹了Vue3使用router,params傳參為空問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
Vue3使用router,params傳參為空
Vue Router更新后，我們使用param傳參在新頁面無法獲取數(shù)據(jù)。
1.使用query方式傳參
只需要將params變?yōu)閝uery就行。
注意：
query傳參只能用路由表中的path，不是name，并且所有參數(shù)都會顯示在URL地址上。
<template>
<span
class="battery-capacity"
@click="goBatteryClusterInfo(index)">
</span>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router"
const router = userRouter;
const goBatteryClusterInfo = (index: number): void => {
let param = index + 1;
router.push({
name: "batteryClusterDetail",
query: { param },
});
};
</script>2.使用 History API 方式傳遞和接收
在跳轉(zhuǎn)前的頁面使用 state 參數(shù)：
<template>
<span
class="battery-capacity"
@click="goBatteryClusterInfo(index)">
</span>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router"
const router = userRouter;
const goBatteryClusterInfo = (index: number): void => {
let param = index + 1;
// 使用 History API 方式傳遞和接收,在跳轉(zhuǎn)前的頁面使用 state 參數(shù)
router.push({
name: "batteryClusterDetail",
state: { param },
});
};
</script>在另一個頁面中獲取數(shù)據(jù)
// 獲取history中我們上個頁面保存的數(shù)據(jù) const historyParam = history.state.param; console.log(history.state,"history.state")
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細介紹了IntelliJ IDEA編輯器配置vue高亮顯示，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
最近有個需求，一個列表上下移動要有簡單過渡效果。本文通過實例代碼給大家介紹Vue 列表上下過渡效果,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了使用ElementUI修改el-tabs標簽頁組件樣式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家介紹了Vue中的keep-alive，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
本篇文章主要介紹了淺談Vue2.0父子組件間事件派發(fā)機制，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
Vue.js bootstrap前端實現(xiàn)分頁和排序
這篇文章主要為大家詳細介紹了Vue.js結(jié)合bootstrap前端實現(xiàn)分頁和排序效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了VUE程序調(diào)試的方法，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-06-06
vue+Element-ui實現(xiàn)分頁效果實例代碼詳解
這篇文章主要介紹了vue+Element-ui實現(xiàn)分頁效果 ,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-12-12
生命周期鉤子又被叫做生命周期時間,生命周期函數(shù),生命周期鉤子就是vue生命周期中出發(fā)的各類事件,這些事件被稱為生命周期鉤子,下面這篇文章主要給大家介紹了關(guān)于Vue生命周期鉤子的相關(guān)資料,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了詳解處理Vue單頁面應(yīng)用SEO的另一種思路，本文主要針對 vue 2.0 單頁面 Meta SEO 優(yōu)化展開介紹，非常具有實用價值，需要的朋友可以參考下2018-11-11