vue路由传参接收以及传参对象为对象时的问题及解决

<div @click='toDetail'>查看详情</div>

const router = useRouter()
const toDetail = () => {
    // 我使用的是Vue3，router要从useRouter获取
    router.push({ name: 'viewAttendPerson', params: { list: JSON.stringify(formObj.form.myMeetingParticipatorList) } })
}

import { useRoute } from "vue-router";
setup() {
    const route = useRoute()
    const data = JSON.parse(route.params.list)
}

let data = this.$route.params.list
data = JSON.parse(data)

<router-link to="/a/123">routerlink传参</router-link>
 
// 跳转后拿到参数
mounted () {
  this.num = this.$route.params.num
}
 
 
//num是在配置路由路径时定义好的
 
{path: '/a/:num', name: A, component: A}

<button @click="deliverParams(123)">push传参</button>
  methods: {
    deliverParams (id) {
      this.$router.push({
        path: `/d/${id}`
      })
    }
  }
 
//拿到参数
mounted () {
  this.id = this.$route.params.id
}
 
//路由配置
{path: '/d/:id', name: D, component: D}

//写好要push去到的组件名
 
<button @click="deliverByName()">params传参</button>
    deliverByName () {
      this.$router.push({
        name: 'B',
        params: {
          sometext: '一只羊出没'
        }
      })
    }
 
//跳转后params拿到数据
<template>
  <div id="b">
    This is page B!
    <p>传入参数：{{this.$route.params.sometext}}</p>
  </div>
</template>
 
//路由规则定义
{path: '/b', name: 'B', component: B}

//定义路由事件
<button @click="deliverQuery()">query传参</button>
    deliverQuery () {
      this.$router.push({
        path: '/c',
        query: {
          sometext: '这是小羊同学'
        }
      })
    }
 
//跳转后拿到数据
<template>
  <div id="C">
    This is page C!
    <p>这是父组件传入的数据: {{this.$route.query.sometext}}</p>
  </div>
</template>
 
//路由配置 无需做任何额外配置
{path: '/c', name: 'C', component: C}

http://localhost:8080/#/c?sometext=%E8%BF%99%E6%98%AF%E5%B0%8F%E7%BE%8A%E5%90%8C%E5%AD%A6