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>
相关推荐
susu1083018911几秒前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾2 分钟前
前端基础-html-注册界面
前端·算法·html
Rattenking2 分钟前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js
Dragon Wu4 分钟前
前端 Canvas 绘画 总结
前端
CodeToGym9 分钟前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化
~甲壳虫10 分钟前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js
~甲壳虫14 分钟前
说说webpack proxy工作原理?为什么能解决跨域
前端·webpack·node.js
Cwhat15 分钟前
前端性能优化2
前端
熊的猫1 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
瑶琴AI前端1 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app