【vue】跳转页面,并且传递参数

简介: 【vue】跳转页面,并且传递参数

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


1268169-20210312180105586-1178046257.png


从A到B。


1268169-20210312181959403-1153980435.png


其实就是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里调用即可
        },


很简单,做个记录。

相关文章
|
1天前
|
JavaScript 网络架构
|
1天前
|
人工智能 JavaScript 索引
Duplicate keys detected: This may cause an update error.【Vue遍历渲染报错的解决】
这篇文章讨论了在Vue中进行列表渲染时遇到的“Duplicate keys detected”错误。这个错误通常发生在使用 `v-for` 指令渲染列表时,如果没有为每个循环项指定一个唯一的 `key` 属性,或者指定的 `key` 属性值重复了。文章提供了导致错误的原始代码示例,并给出了修正后的代码,通过在 `key` 绑定中加入索引确保 `key` 的唯一性。此外,文章还解释了为什么需要唯一 `key` 以及如何解决这个问题。
Duplicate keys detected: This may cause an update error.【Vue遍历渲染报错的解决】
|
1天前
|
缓存 移动开发 JavaScript
查漏补缺方为上策!!两万六字总结vue的基本使用和高级特性,周边插件vuex和vue-router任你挑选
该文章全面总结了Vue.js的基本使用方法与高级特性,并介绍了Vue周边的重要插件Vuex和Vue-Router的使用技巧。
查漏补缺方为上策!!两万六字总结vue的基本使用和高级特性,周边插件vuex和vue-router任你挑选
|
1天前
|
开发框架 JavaScript 前端开发
手把手教你剖析vue响应式原理,监听数据不再迷茫
该文章深入剖析了Vue.js的响应式原理,特别是如何利用`Object.defineProperty()`来实现数据变化的监听,并探讨了其在异步接口数据处理中的应用。
|
JavaScript 数据安全/隐私保护
work02_vue页面打印水印
work02_vue页面打印水印
329 0
work02_vue页面打印水印
|
2天前
|
JavaScript
Vue使用element中table组件实现单选一行
如何在Vue中使用Element UI的table组件实现单选一行的功能。
16 5
Vue使用element中table组件实现单选一行
|
2天前
|
JavaScript
Vue实现按钮级别权限
文章介绍了在Vue中实现按钮级别权限的两种方法:使用自定义Vue指令和使用v-if指令配合自定义方法。
12 4
Vue实现按钮级别权限
|
1天前
|
缓存 JavaScript 前端开发
vue-day02计算属性,v-bind,v-if,v-for
文章介绍了Vue.js中的计算属性、class与style的绑定、条件渲染和列表渲染的使用。通过示例代码展示了如何使用计算属性简化模板逻辑、如何通过v-bind动态绑定class和style、如何使用v-if进行条件渲染以及如何使用v-for进行列表渲染。这些特性使得Vue.js在构建动态用户界面时更加灵活和强大。
vue-day02计算属性,v-bind,v-if,v-for
|
1天前
|
JavaScript
vue项目中使用vue-router进行路由配置及嵌套多级路由
该文章详细说明了如何在Vue项目中配置和使用vue-router进行单页面应用的路由管理,包括设置嵌套路由和实现多级路由导航的示例。
vue项目中使用vue-router进行路由配置及嵌套多级路由
|
2天前
|
JavaScript
Vue+element_Table树形数据与懒加载报错Error in render: “RangeError: Maximum call stack size exceeded“
本文讨论了在使用Vue和Element UI实现树形数据和懒加载时遇到的“Maximum call stack size exceeded”错误,指出问题的原因通常是因为数据中的唯一标识符`id`不唯一,导致递归渲染造成调用栈溢出。
11 1
Vue+element_Table树形数据与懒加载报错Error in render: “RangeError: Maximum call stack size exceeded“