在前端页面表单列表修改时,经常需要在页面切换的时候,传递需要修改的表单内容,通常可通过路由进行表单参数的传递。

首先,配置页面跳转路由。在 router/index.js 中配置相应的页面跳转路由,如下所示:

其次,在相应页面的 index.vue 中的 methods 创建相应的方法,通过 $router.push 进行页面跳转及参数传递。如下所示:

通过 query 传递的参数信息在请求路径中,原文展示。通过请求路径传递表单参数,强制刷新页面时,则表单内容也不会丢失。

再次,跳转页面接收参数设置。在 export default 可通过 $route.query 进行获取请求参数信息,并在页面初始化的时候,进行修改表单数据的绑定操作,如下所示:

通过如上设置,即可在页面跳转的时,也可通过路由进行 query 表单参数的信息传递。

VUE-007-通过路由 router.push 传递 query 参数(路由 name 识别,请求链接显示参数传递)的更多相关文章

  1. VUE-008-通过路由 router.push 传递 query 参数(路由 path 识别,请求链接显示参数传递)

    在前端页面表单列表修改时,经常需要在页面切换的时候,传递需要修改的表单内容,通常可通过路由进行表单参数的传递. 首先,配置页面跳转路由.在 router/index.js 中配置相应的页面跳转路由,如 ...

  2. VUE-006-通过路由 router.push 传递 params 参数(路由 name 识别,请求链接不显示)

    在前端页面表单列表修改时,经常需要在页面切换的时候,传递需要修改的表单内容,通常可通过路由进行表单参数的传递. 首先,配置页面跳转路由.在 router/index.js 中配置相应的页面跳转路由,如 ...

  3. vue-router同路由$router.push不跳转一个简单解决方案

    vue-router同路由$router.push不跳转一个简单解决方案 vue-router跳转一般是这么写: toCurrentPage: function(thisId){ this.$rout ...

  4. vue.js 中this.$router.push()的使用

    在vue项目中,跳转可以用router-link直接跳到某个页面 因为有时候会需要做一些判断等情况,所以要用到 this.$router.push() 因为外链跳转根本就不在router的设计考虑范围 ...

  5. Vue页面跳转$router.push 的用法

    vue2.0在使用的过程中, .vue文件之间的跳转,在template中的常见写法是: <router-link to="/miniCard/statement/horizon&qu ...

  6. 关于Vue中,$this.router.push到当前页面,只是传入参数不同,页面不刷新的问题解决

    在页面的watch中,监听$router的变化 watch: { $route (to, from) { this.$router.go(0) } } 其中this.$router.go(0)为刷新页 ...

  7. vue 使用a+ router.push的形式跳转时,地址栏不显示参数

    解决办法: a链接不要写href 属性

  8. Vue设置路由跳转的两种方法: <router-link :to="..."> 和router.push(...)

    一.<router-link :to="..."> to里的值可以是一个字符串路径,或者一个描述地址的对象.例如: // 字符串 <router-link to= ...

  9. Vue-详解设置路由导航的两种方法: <router-link :to="..."> 和router.push(...)

    一.<router-link :to="..."> to里的值可以是一个字符串路径,或者一个描述地址的对象.例如: // 字符串 <router-link to= ...

随机推荐

  1. Git常用的操作

    1.git使用的常规操作     git pull——>编辑——>git add——>git commit——>git push 用git add把文件添加进去,实际上就是把文 ...

  2. 仿stl+函数模板

    #include<iostream> using namespace std; template<class T> void output(T begin, T end) { ...

  3. 【原创】大数据基础之Spark(6)Spark Rdd Sort实现原理

    spark 2.1.1 spark中可以通过RDD.sortBy来对分布式数据进行排序,具体是如何实现的?来看代码: org.apache.spark.rdd.RDD /** * Return thi ...

  4. 【原创】大数据基础之Parquet(1)简介

    http://parquet.apache.org 层次结构: file -> row groups -> column chunks -> pages(data/index/dic ...

  5. 【原创】大数据基础之ElasticSearch(2)常用API整理

    Fortunately, Elasticsearch provides a very comprehensive and powerful REST API that you can use to i ...

  6. selenium+python-unittest多线程执行用例

    前言 假设执行一条脚本(.py)用例一分钟,那么100个脚本需要100分钟,当你的用例达到一千条时需要1000分钟,也就是16个多小时...那么如何并行运行多个.py的脚本,节省时间呢?这就用到多线程 ...

  7. thinkPHP中M()和D()的区别

    在实例化的过程中,经常使用D方法和M方法,这两个方法的区别在于M方法实例化模型无需用户为每个数据表定义模型类,如果D方法没有找到定义的模型类,则会自动调用M方法.通俗一点说:M实例化参数是数据库的表名 ...

  8. ERROR: invalid byte sequence for encoding "UTF8": 0x00

    1.使用kettle批量导入数据的时候,数据出现了下面的错误.ERROR: invalid byte sequence for encoding "UTF8": 0x00 关键点: ...

  9. javascript 通过模块模式实现代码访问控制

    <script type="text/javascript"> // 在匿名函数中使用var关键字 (function(){ var privateField = 42 ...

  10. 【软件工程】分布式版本控制系统Git的安装与使用

    作业的要求来自于:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE2/homework/2097 远端库地址:https://github.com/Richa ...