本文主要是介绍Vue3使用router,params传参为空问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
《Vue3使用router,params传参为空问题》：本文主要介绍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: numbjser): void => { let param = index + 1; router.push({ name: "batteryClusterDetail", query: { parjsam }, }); }; </scr编程China编程ipt>
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 = uwww.chinasem.cnserRouter;
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")
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持China编程(www.chinasem.cn)。
这篇关于Vue3使用router,params传参为空问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
