vue跳转页面并且实现参数传递接受示例
目录
- vue跳转页面及参数的传递接受
- 一、页面跳转、传递参数
- 二、接收参数
vue跳转页面及参数的传递接受 要实现一个功能:从页面A跳转到页面B,并且页面A的参数要传递到页面B,B使用传过来的参数。
文章图片
从A到B。
文章图片
其实就是2步走:1,A传递参数。2,B接受参数。
一、页面跳转、传递参数
在A页面的对应按钮,写上一个方法,点击的时候调用这个方法,进行跳转。
# content of A查看报告&日志 ... ...# 写上对应的方法goto_report_log(job_name) {//点击跳转到报告页this.$router.push({path: '/manage/testReportAndLogo',query: {job_name: job_name}})}
这时候,点击按钮就可以调转到B页面了。
二、接收参数
首先,页面B的html对应的字段要添加好,这是前提。
... ...export default {data() {return {job_name: "", # 存放A传过来的值... ...# 接着写上对应的方法methods: {getParams() {this.job_name = this.$route.query.job_name # 这里可以用this.$route.query拿到值... ...created() {this.getParams(); # 放在created里调用即可}, #使用拿到的值
很简单,做个记录。
【vue跳转页面并且实现参数传递接受示例】以上就是vue跳转页面并且实现参数传递接受示例的详细内容,更多关于vue跳转页面参数传递接受的资料请关注脚本之家其它相关文章!
推荐阅读
- 在WordPress的不同页面中的不同标题
- vue在取对象长度length时候出现undefined的解决
- 当我尝试使用自定义模板页面时,WordPress会抛出404
- WordPress主题选项页面创建一个选择列表(下拉列表)()
- 毕业设计|SpringMVC+Vue项目运动品交易商城
- 课程设计|SpringMVC+Vue项目旅游资源网站
- vue3 中 vue.config.js修改端口 添加代理配置#yyds干货盘点#
- vue面试总结-2022
- WordPress-如何在wp_nav_menu中显示指向”私人”页面的链接()
- 前端框架|Vuejs011---vuejs 对象的生命周期