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

最新推荐文章于 2024-06-07 11:02:37 发布

LazyCat_Wei

最新推荐文章于 2024-06-07 11:02:37 发布

阅读量549

点赞数 1

文章标签： vben admin

本文链接：https://blog.csdn.net/weixin_44653386/article/details/136938503

版权

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>