VUE-008-通过路由 router.push 传递 query 参数(路由 path 识别,请求链接显示参数传递)
在前端页面表单列表修改时,经常需要在页面切换的时候,传递需要修改的表单内容,通常可通过路由进行表单参数的传递。
首先,配置页面跳转路由。在 router/index.js 中配置相应的页面跳转路由,如下所示:

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

通过 query 传递的参数信息在请求路径中,参数信息明文显示在请求 URL 上。通过当前的设置方式,若强制刷新页面,则表单内容也不会丢失。
再次,跳转页面接收参数设置。在 export default 可通过 $route.params 进行获取请求参数信息,并在页面初始化的时候,进行修改表单数据的绑定操作,如下所示:

通过如上设置,即可在页面跳转的时,通过路由进行表单参数的信息传递。
VUE-008-通过路由 router.push 传递 query 参数(路由 path 识别,请求链接显示参数传递)的更多相关文章
- VUE-007-通过路由 router.push 传递 query 参数(路由 name 识别,请求链接显示参数传递)
在前端页面表单列表修改时,经常需要在页面切换的时候,传递需要修改的表单内容,通常可通过路由进行表单参数的传递. 首先,配置页面跳转路由.在 router/index.js 中配置相应的页面跳转路由,如 ...
- VUE-006-通过路由 router.push 传递 params 参数(路由 name 识别,请求链接不显示)
在前端页面表单列表修改时,经常需要在页面切换的时候,传递需要修改的表单内容,通常可通过路由进行表单参数的传递. 首先,配置页面跳转路由.在 router/index.js 中配置相应的页面跳转路由,如 ...
- vue-router同路由$router.push不跳转一个简单解决方案
vue-router同路由$router.push不跳转一个简单解决方案 vue-router跳转一般是这么写: toCurrentPage: function(thisId){ this.$rout ...
- vue.js 中this.$router.push()的使用
在vue项目中,跳转可以用router-link直接跳到某个页面 因为有时候会需要做一些判断等情况,所以要用到 this.$router.push() 因为外链跳转根本就不在router的设计考虑范围 ...
- Vue页面跳转$router.push 的用法
vue2.0在使用的过程中, .vue文件之间的跳转,在template中的常见写法是: <router-link to="/miniCard/statement/horizon&qu ...
- 关于Vue中,$this.router.push到当前页面,只是传入参数不同,页面不刷新的问题解决
在页面的watch中,监听$router的变化 watch: { $route (to, from) { this.$router.go(0) } } 其中this.$router.go(0)为刷新页 ...
- vue 使用a+ router.push的形式跳转时,地址栏不显示参数
解决办法: a链接不要写href 属性
- Vue设置路由跳转的两种方法: <router-link :to="..."> 和router.push(...)
一.<router-link :to="..."> to里的值可以是一个字符串路径,或者一个描述地址的对象.例如: // 字符串 <router-link to= ...
- Vue-详解设置路由导航的两种方法: <router-link :to="..."> 和router.push(...)
一.<router-link :to="..."> to里的值可以是一个字符串路径,或者一个描述地址的对象.例如: // 字符串 <router-link to= ...
随机推荐
- Mockito框架入门教程(二)
接上一篇,继续学习其它的.... 8.找出冗余的互动(即未被验证到的) @Test(expected = NoInteractionsWanted.class) public void find_re ...
- 【原创】Linux基础之后台运行
linux服务器通常都是远程登录的,执行命令或者脚本时,如果连接断掉(执行时间较长或者网络不稳定时),那么进程也就没了,这时只能重新连接重新执行,这时可以使用后台执行: 1 nohup 命令 nohu ...
- [C]\x字符转义序列
概述 \x转义的定义是这样的 转义符 字符值 输出结果 \xh[h...] 具有此十六进制码的字符 输出此字符 问题 看似\x后面可以接受1或n个十六进制的字符,但是如果你把一个 ...
- 【python】flask+nginx配置
背景信息 有wordpress服务A 有flask服务B, gunicorn启动,8个进程 用nginx代理,实现访问A然后跳转到B 问题 flask服务B上有文件上传操作,用nginx后发现无法上传 ...
- 《剑指offer》二叉搜索树和双向链表
本题来自<剑指offer> 反转链表 题目: 思路: C++ Code: Python Code: 总结:
- java----SAX解析XML
XML: 可扩展标记语言 1.充当显示数据 2.储存数据 3.传输数据 SAX: 水电费 基于事假驱动,顺序读写,速度快 不能任意读取节点,灵活性差 解析时,占用内存小 import org.xml. ...
- Ubuntu-linux云服务器下安装开启虚拟环境失败解决办法
为什么要安装虚拟环境? 1.某些项目需要安装旧的包,开发相应功能 2.项目开发时,安装部分环境不希望影响整机环境 如何安装? 首先安装python 安装pip工具 sudo apt-get insta ...
- 阿里云学生服务器搭建网站-Ubuntu16.04安装php开发环境
阿里云学生服务器搭建网站(2)-Ubuntu16.04安装php开发环境 优秀博文:https://www.linuxidc.com/Linux/2016-10/136327.htm https:/ ...
- linux环境部署python3+django
1. 确定Linux安装C/C++编译器,在线安装: yum install gcc gcc-c++ autoconf automake 2. 安装依赖环境: yum -y install zlib- ...
- jfinal undertow web.xml
由于 undertow 是为嵌入式 server 而生,所以 jfinal undertow 项目是不需要 web.xml 这个文件的 线上这版 Filter.Servelt.Listener.Web ...