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

前提：有完整的路由规则

创建源页面

<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里面写自己的路由编码，传了当前行数据和自定义参数，当前行参数要序列化

序列化是指将对象转换为字节序列的过程，以便于存储或传输。在序列化过程中，对象的状态信息将被转换为字节流，可以保存到文件中或通过网络传输给其他计算机。

创建目标页面

<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.username
  item.value = JSON.parse(route.query.row as string);//这里反序列化获取参数
  console.log("row",item.value);
 
})
</script>
 
<style scoped>
 
</style>
 

反序列化是指将字节序列恢复为对象的过程。在序列化中，对象的状态信息被转换为字节流以便于存储或传输，而在反序列化中，这些字节流将被重新转换为原始对象的状态。