vue跳转页面并且实现参数传递接受示例

 更新时间:2022年06月02日 17:12:11   作者:把苹果咬哭的测试笔记  
这篇文章主要为大家介绍了vue跳转页面并且实现参数传递接受示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

vue跳转页面及参数的传递接受

要实现一个功能:从页面A跳转到页面B,并且页面A的参数要传递到页面B,B使用传过来的参数。

从A到B。

其实就是2步走:1,A传递参数。2,B接受参数。

一、页面跳转、传递参数

在A页面的对应按钮,写上一个方法,点击的时候调用这个方法,进行跳转。

# content of A
                    <el-button size="mini" icon="el-icon-zoom-in"
                                   @click.native="goto_report_log(scope.row.job_name)">查看报告&日志
                    </el-button>
              ... ...
# 写上对应的方法
            goto_report_log(job_name) {
            //    点击跳转到报告页
                this.$router.push(
                    {
                        path: '/manage/testReportAndLogo',
                        query: {
                            job_name: job_name
                        }
                    }
                )
            }

这时候,点击按钮就可以调转到B页面了。

二、接收参数

首先,页面B的html对应的字段要添加好,这是前提。

<el-form-item label="Job名称" labelWidth="110px">
                <el-input placeholder="输入job名称" v-model="this.job_name"> #使用拿到的值
                </el-input>
            </el-form-item>
        ... ...
    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跳转页面参数传递接受的资料请关注脚本之家其它相关文章!

相关文章

  • Vue3中reactive函数toRef函数ref函数简介

    Vue3中reactive函数toRef函数ref函数简介

    这篇文章主要介绍了Vue3中的三种函数,分别对reactive函数toRef函数以及ref函数原理及使用作了简单介绍,有需要的朋友可以借鉴参考下
    2021-09-09
  • vue2从数据变化到视图变化之nextTick使用详解

    vue2从数据变化到视图变化之nextTick使用详解

    这篇文章主要为大家介绍了vue2从数据变化到视图变化之nextTick使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • vue3 setup语法糖之父子组件之间的传值方法

    vue3 setup语法糖之父子组件之间的传值方法

    父组件向子组件传值的时候,子组件是通过props来接收的,然后以变量的形式将props传递到setup语法糖果中使用,本文给大家介绍vue3 setup语法糖之父子组件之间的传值,感兴趣的朋友一起看看吧
    2023-12-12
  • 基于Vue-cli快速搭建项目的完整步骤

    基于Vue-cli快速搭建项目的完整步骤

    这篇文章主要给大家介绍了关于如何基于Vue-cli快速搭建项目的完整步骤,文中通过示例代码以及图片将搭建的步骤一步步介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-11-11
  • vue+elementUI实现点击左右箭头切换按钮功能

    vue+elementUI实现点击左右箭头切换按钮功能

    这篇文章主要介绍了vue+elementUI实现点击左右箭头切换按钮功能,样式可以根据自己需求改动,感兴趣的朋友可以参考下实现代码
    2024-05-05
  • Vue中函数防抖节流的理解及应用实现

    Vue中函数防抖节流的理解及应用实现

    这篇文章主要介绍了Vue中函数防抖节流的理解及应用实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • vue中使用unity3D如何实现webGL将要呈现的效果

    vue中使用unity3D如何实现webGL将要呈现的效果

    这篇文章主要介绍了vue中使用unity3D如何实现webGL将要呈现的效果,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • vue-cli3单页构建大型项目方案

    vue-cli3单页构建大型项目方案

    这篇文章主要介绍了vue-cli3单页构建大型项目方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • vue编译打包本地查看index文件的方法

    vue编译打包本地查看index文件的方法

    下面小编就为大家分享一篇vue编译打包本地查看index文件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • Vue 按键修饰符处理事件的方法

    Vue 按键修饰符处理事件的方法

    这篇文章主要介绍了Vue 按键修饰符的相关资料,vue中新增按键修饰符和系统修饰符来处理类似的事件,具体内容详情大家参考下本文
    2018-05-05

最新评论