vben admin路由跳转拿不到param参数问题

本文主要是介绍vben admin路由跳转拿不到param参数问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

vben admin路由跳转拿不到param参数问题

问题原因：
在这里插入图片描述

也就是说，从Vue Router的2022-8-22 这次更新后，我们使用上面的方式在新页面无法获取：

vue也给我们提出了解决方案：

1.使用 query 的方式传参

2.将参数放在 pinia 或 vuex仓库里

3.使用动态路由匹配

4.[传递 state，在新页面使用 History API 接收参数](#使用 History API 方式传递和接收)

5.使用 meta 原信息方式传递 (此方式更适用于路由守卫)

目前使用第4种方式，本地已验证成功。

传参页面：

<template><div>{{ title }}</div><a-button type="primary" @click="toUrl">路由跳转测试</a-button>
</template><script lang="ts" setup>import { ref } from 'vue';import { router } from '@/router';const title = ref<string>('这是产品管理页面');const params = {type: 'asd',name: 'viking',age: 20,habooy: [1, 3, 43, 5, 6, 6],};const toUrl = () => {// router.push(PageEnum.BASE_LOGIN);router.push({name: 'DpMange',state: { params },});};
</script><style scoped></style>

接收页面：

<template><div>{{ title }}</div>
</template><script lang="ts" setup>import { ref, onMounted } from 'vue';const title = ref<string>('路由测试页面');onMounted(() => {const historyParams = history.state.params;console.log('history.state,@@@@@@@@@@@@@@@@@@@@@@@@@@@', history.state, historyParams);});
</script><style scoped></style>