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

前提:有完整的路由规则

1.源页面

html 复制代码
<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.目标页面

html 复制代码
<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>
相关推荐
涵信3 分钟前
第十节:性能优化高频题-虚拟DOM与Diff算法优化
javascript·vue.js·性能优化
谈不譚网安3 分钟前
CSRF请求伪造
前端·网络安全·csrf
TT模板9 分钟前
苹果cmsV10主题 MXonePro二开优化修复开源版
前端·html5
拖孩10 分钟前
【Nova UI】十一、组件库中 Icon 组件的测试、使用与全局注册全攻略
前端·javascript·vue.js·ui·sass
去伪存真15 分钟前
不用动脑,手把手跟着我做,就能掌握Gitlab+Jenkins提交代码自动构部署
前端·jenkins
天天扭码1 小时前
深入解析 JavaScript 中的每一类函数:从语法到对比,全面掌握适用场景
前端·javascript·面试
小希爸爸1 小时前
4、中医基础入门和养生
前端·后端
kooboo china.1 小时前
Tailwind CSS 实战:基于 Kooboo 构建企业官网页面(一)
前端·css·编辑器
uhakadotcom1 小时前
Fluid:云原生数据加速与管理的简单入门与实战
前端
凉豆菌2 小时前
在html中如何创建vue自定义组件(以自定义文件上传组件为例,vue2+elementUI)
vue.js·elementui·html