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.username
item.value = JSON.parse(route.query.row as string);//这里反序列化获取参数
console.log("row",item.value);
})
</script>
<style scoped>
</style>
原文地址:https://blog.csdn.net/RHHcainiao/article/details/140695860
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!