Vue3点击按钮实现跳转页面并携带参数

前提：有完整的路由规则

1.源页面

<template><div><h1>源页面</h1><!--通过js代码跳转--><template #default="scope"><button @click="toTargetView(scope.row)">点击跳转携带参数</button></template></div>
</template><script setup>
//引入路由组件
import router from '@/router/index.js'
import {ref} from 'vue'//可以定义参数
const testParam= ref('Test')const toTargetView = () => {router.push({path: 'prmbillingcancel',query: {testParam: testParam.value,row: JSON.stringify(row),//这里要JSON序列化一下}})
}</script><style scoped></style>

目标页面这里 path里面写自己的路由编码，传了当前行数据和自定义参数，当前行参数要序列化

2.目标页面

<template><div><h1>目标页面</h1>用户名：{{ username }}</div>
</template><script setup>
import {onMounted, ref} from 'vue'
import {useRoute} from 'vue-router'const route = useRoute()
//接收自定义参数
const username = ref('')
//接收当前行数据
const item = ref<any>(null);//使用钩子函数接收来自路由的参数
onMounted(() => {username.value = route.query.usernameitem.value = JSON.parse(route.query.row as string);//这里反序列化获取参数console.log("row",item.value);})
</script><style scoped></style>