欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關文章

最新評論