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

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

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

通过 query 传递的参数信息在请求路径中,参数信息明文显示在请求 URL 上。通过当前的设置方式,若强制刷新页面,则表单内容也不会丢失。

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

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

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

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

    在前端页面表单列表修改时,经常需要在页面切换的时候,传递需要修改的表单内容,通常可通过路由进行表单参数的传递. 首先,配置页面跳转路由.在 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. JAVA 数组元素的反转

    package Code411;/*数组元素的反转本来[1,2,3,4]反转后[4,3,2,1]1.对称位置的元素交换2.对称位子需要两个索引3.int temp =a:a=b;b=temp;4.什么 ...

  2. Python 回溯算法

    回溯算法(试探法) 在搜索尝试过程中寻找问题的解,当发现已不满足求解条件时,就"回溯"返回,尝试别的路径.回溯法是一种选优搜索法,按选优条件向前搜索,以达到目标.但当探索到某一步时 ...

  3. redis-list操作

    List操作,redis中的List在在内存中按照一个name对应一个List来存储.如图: lpush(name,values) # 在name对应的list中添加元素,每个新的元素都添加到列表的最 ...

  4. 饮冰三年-人工智能-Python-19 Python网络编程

    Socket:套接字.作用:我们只需要安照socket的规定去编程,就不需要深入理解tcp/udp协议也可以实现 1:TCP协议 1.1  客户端服务端循环收发消息 # 1:引入stock模块(导包) ...

  5. apache负载调优

    Apache负载调优 watch -n 1 -d "pgrep httpd|wc -l"  #apache动态查看连接数     ps aux | grep httpd | wc ...

  6. ansible的lookup

    lookup路径: /usr/lib/python2.7/site-packages/ansible/plugins/lookup 所有的lookup插件列表cartesian.py dnstxt.p ...

  7. git本地项目上传至码云gitee

    如果你的本机是安装成功第一次使用,先配置一下一些基本的信息 $ git config--global user.name "Your Name" $ git config --gl ...

  8. 联发科MT8377 MT8389 MT6589 MT6577等芯片详细解析

    MT8389大家都比较陌生,但如果我说MT6589估计大家都懂了,实质上MT8389是MT6589的一个分支,一个克隆分支,说得再明了些,就是MT6589的高耗版.如果把它看成是同一个CPU也是可以的 ...

  9. linux下安装部署ansible

    linux下安装部署ansible 介绍 Ansible是一种批量部署工具,现在运维人员用的最多的三种开源集中化管理工具有:puppet,saltstack,ansible,各有各的优缺点,其中sal ...

  10. mybatis查询语句的背后

    转载请注明出处... 一.前言 在先了解mybatis查询之前,先大致了解下以下代码的为查询做了哪些铺垫,在这里我们要事先了解,myabtis会默认使用DefaultSqlSessionFactory ...