脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue3使用router,params传参为空

Vue3使用router,params传参为空问题

 更新时间：2025年04月08日 15:20:59   作者：₍•ʚ•₎呀呀  
这篇文章主要介绍了Vue3使用router,params传参为空问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

Vue3使用router,params传参为空

Vue Router更新后，我们使用param传参在新页面无法获取数据。

1.使用query方式传参

只需要将params变为query就行。

注意：

query传参只能用路由表中的path，不是name，并且所有参数都会显示在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 方式传递和接收

在跳转前的页面使用 state 参数：

<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 方式传递和接收,在跳转前的页面使用 state 参数
    router.push({
      name: "batteryClusterDetail",
      state: { param },
    });
};
</script>

在另一个页面中获取数据

// 获取history中我们上个页面保存的数据
const historyParam = history.state.param;
console.log(history.state,"history.state")

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

最新评论