【vue3-传参】路由跳转隐藏参数跳转使用History传参

【注意1:】Vue3中 Router的自2022-8-22 日后不能使用 params传参
可以这么写,但是接收的时候会是空值
query可以用但不能用隐藏Url地址内的值,所以我们用History来写
这个相当于history模式父级调到子集后,子集访问历史查到的这个数据,省略了Url显示和刷新不存在的的问题
注意2:
1.JSON.stringify(Json)需要把内容转换一下不然不能传
2. JSON.parse(history.state.data)接收时也需要转换一下
3.router.push中的 state 必须是这个名字,不能用query

<script lang="ts" setup>

import { useRouter } from 'vue-router'
const router = useRouter();
router.push(
        { 
           path: "/project",
           state:
           {
               data:JSON.stringify(json)
           }
        })


<script>
<script lang="ts" setup>
import { ref } from "vue";
const tableData = ref([]);

if (history.state.data) {
    tableData.value  = JSON.parse(history.state.data)
}
<script>

在这里插入图片描述

相关推荐

  1. vue3

    2024-01-23 18:00:13       57 阅读
  2. vue3传递参数: params接收不到?

    2024-01-23 18:00:13       36 阅读
  3. vue

    2024-01-23 18:00:13       30 阅读
  4. js的方式

    2024-01-23 18:00:13       30 阅读
  5. 【React】react-router-dom导航的

    2024-01-23 18:00:13       63 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-01-23 18:00:13       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-01-23 18:00:13       100 阅读
  3. 在Django里面运行非项目文件

    2024-01-23 18:00:13       82 阅读
  4. Python语言-面向对象

    2024-01-23 18:00:13       91 阅读

热门阅读

  1. 人工智能工程师将来有什么发展

    2024-01-23 18:00:13       57 阅读
  2. idea编译打包前端vue项目

    2024-01-23 18:00:13       51 阅读
  3. MySQL新增、管理用户,控制访问【新手向】

    2024-01-23 18:00:13       57 阅读
  4. Qt容器QVector

    2024-01-23 18:00:13       54 阅读
  5. 程序员裁员潮:技术变革下的职业危机

    2024-01-23 18:00:13       52 阅读