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>

测试结果：