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