亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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)文章

最新評(píng)論