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= ...
随机推荐
- 【原创】Linux基础之常用命令
1 磁盘.cpu.内存相关 查看全部设备信息 # lspci 查看整体磁盘空间占用情况 # df -h 查看整体磁盘inode占用情况 # df -i 查看文件详细信息 # ls -l $path 查 ...
- ssh项目问题01,为创建数据库抛出的异常
框架什么都搭建好了,但是一直抛出如图问题,网上资料很多让你设置时间之类的,也设置了还是继续抛异常,最后带我的师傅说没有创建数据库,我都要郁闷死了,网上那么多,很多写的都不能解决问题,还乱写,浪费别人时 ...
- php无限极分类方法
仅供参考: //控制器 $data = M('category')->select(); $datas = D('Category')->_getTree($data, 0,0,TRUE) ...
- String Formatting in C#
原文地址 http://blog.stevex.net/string-formatting-in-csharp/ When I started working with the .NET framew ...
- 一键配置高可用Hadoop集群(hdfs HA+zookeeper HA)
准备环境 3台节点,主节点 建议 2G 内存,两个从节点 1.5G内存, 桥接网络 关闭防火墙 配置ssh,让节点之间能够相互 ping 通 准备 软件放到 autoInstall 目录下,已存放 ...
- selenium截取具体元素图片(python版)
原理: 1.截图(整个窗口) 2.获取此元素坐标 element = driver.find_element_by_id("xx") element.location) 3.获取此 ...
- YII2 console中引用其他模块(子项目)的model时出现model找不到命名空间的问题解决
YII2 console中写定时任务, 想使用其他模块的model, 在 console的yii.php 入口文件中引入其他模块的配置文件, 否者会出现model等命名空间找不到的问题. 还有, 命名 ...
- 链式前向星版DIjistra POJ 2387
链式前向星 在做图论题的时候,偶然碰到了一个数据量很大的题目,用vector的邻接表直接超时,上网查了一下发现这道题数据很大,vector可定会超的,不会指针链表的我找到了链式前向星这个好东西,接下来 ...
- webpack 安装 打包
一, 下载node.js https://nodejs.org/zh-cn/ 二, //全局安装 npm install -g webpack //npm init 刷新webpack.json 文 ...
- 51nod 1617 奇偶数组
传送门 回来看一眼51nod,发现自己掉到rank4了,赶紧切道题回rank3. 一眼不会做,这种东西应该慢慢找规律吧……然后看到数据范围其实比较小,应该是单次log的,那是不是可以分治啊. #inc ...