<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>
?
// 跳轉(zhuǎn)后拿到參數(shù)
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}`
? ? ? })
? ? }
? }
?
//拿到參數(shù)
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: '一只羊出沒'
? ? ? ? }
? ? ? })
? ? }
?
//跳轉(zhuǎn)后params拿到數(shù)據(jù)
<template>
? <div id="b">
? ? This is page B!
? ? <p>傳入?yún)?shù)：{{this.$route.params.sometext}}</p>
? </div>
</template>
?
//路由規(guī)則定義
{path: '/b', name: 'B', component: B}

//定義路由事件
<button @click="deliverQuery()">query傳參</button>
? ? deliverQuery () {
? ? ? this.$router.push({
? ? ? ? path: '/c',
? ? ? ? query: {
? ? ? ? ? sometext: '這是小羊同學'
? ? ? ? }
? ? ? })
? ? }
?
//跳轉(zhuǎn)后拿到數(shù)據(jù)
<template>
? <div id="C">
? ? This is page C!
? ? <p>這是父組件傳入的數(shù)據(jù): {{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