VUE3 router传对象 使用JSON.stringify和JSON.parse

效果展示

以下代码写法均属于vue3语法 .

传参 - 数据放到JSON.stringify()

<script setup>
import { useRouter } from 'vue-router'
//item为需要传递的数据
function goDetail(item) {
  let obj = JSON.stringify(item)	//将数据通过JSON.stringify处理后赋给obj
  router.push({
    path: '/detail',
    query: { item: obj },		//这里不能直接写成 query: JSON.stringify(item)
  })
}
</script>

//template里的代码
<template>
<div class="card" @click="goDetail(item)">{{ item.title }} </div>
</template>

接收参数 - 数据由JSON.parse()解析处理

<script setup>
const detail = JSON.parse(route.query.item)
</script>

此外本人发现这种（query+path）传参方法 可以让跳转的页面在刷新时不会影响数据的丢失