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使用svg图标的方式总结

    vue3使用svg图标的方式总结

    在Vue 3中,可以使用多种方式来使用SVG图标,这篇文章主要为大家总结了五个常用的方式,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下
    2023-08-08
  • electron+vue 实现静默打印功能

    electron+vue 实现静默打印功能

    这篇文章主要介绍了electron+vue 实现静默打印功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-06-06
  • Vue2.x中的父组件传递数据至子组件的方法

    Vue2.x中的父组件传递数据至子组件的方法

    这篇文章主要介绍了Vue2.x中的父组件数据传递至子组件的方法,需要的朋友可以参考下
    2017-05-05
  • Vue+Typescript中在Vue上挂载axios使用时报错问题

    Vue+Typescript中在Vue上挂载axios使用时报错问题

    这篇文章主要介绍了Vue+Typescript中在Vue上挂载axios使用时报错问题,本文给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-08-08
  • vue 组件中添加样式不生效的解决方法

    vue 组件中添加样式不生效的解决方法

    这篇文章主要介绍了vue 组件中添加样式不生效的解决方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • Vue+ElementUI踩坑之动态显示/隐藏表格的列el-table-column问题

    Vue+ElementUI踩坑之动态显示/隐藏表格的列el-table-column问题

    这篇文章主要介绍了Vue+ElementUI踩坑之动态显示/隐藏表格的列el-table-column问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • 搭建vue开发环境

    搭建vue开发环境

    这篇文章主要介绍了搭建vue开发环境的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07
  • Vue组件和Route的生命周期实例详解

    Vue组件和Route的生命周期实例详解

    这篇文章主要介绍了Vue组件和Route的生命周期的相关知识,需要的朋友可以参考下
    2018-02-02
  • vue使用自定义指令来控制页面按钮组的权限思想

    vue使用自定义指令来控制页面按钮组的权限思想

    这篇文章主要介绍了vue使用自定义指令来控制页面按钮组的权限思想,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue SPA首屏加载缓慢问题解决方案

    Vue SPA首屏加载缓慢问题解决方案

    这篇文章主要介绍了Vue SPA首屏加载缓慢问题解决方案,首屏时间(First Contentful Paint),指的是浏览器从响应用户输入网址地址,到首屏内容渲染完成的时间,此时整个网页不一定要全部渲染完成,但需要展示当前视窗需要的内容
    2023-03-03

最新评论