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= ...
随机推荐
- ASP.NET Core之中间件
本文翻译自:http://www.tutorialsteacher.com/core/aspnet-core-middleware 基本概念 ASP.NET Core引入了中间件的概念,中间件是在AS ...
- 【原创】运维基础之Zabbix(1)简介、安装、使用
zabbix 4 官方:https://www.zabbix.com/ 一 简介 Monitor anythingSolutions for any kind of IT infrastructure ...
- python回归分析五部曲
Python回归分析五部曲(一)—简单线性回归 https://blog.csdn.net/jacky_zhuyuanlu/article/details/78878405?ref=myread Py ...
- jxl应用事例
实例中主要目的是解析jxl使用流程以及jxl绘制Excel的写法思路,代码掩去了项目中的真实数据,请根据需求酌情修改,如果有帮助到有需要的人,不胜欢喜. Dao层为查询数据库,返回list数据,此处省 ...
- linux软件管理
People who cannot find time for recreation are obliged sooner or later to find time for illness.腾不出时 ...
- Windows Internals 笔记——作业
1.Windows提供了一个作业内核对象,它允许我们将进程组合在一起并创建一个“沙箱”来限制进程能够做什么.创建只包含一个进程的作业同样非常有用,因为这样可以对进程施加平时不能施加的限制. 2.如果进 ...
- bootstrap selectpicker控件select下拉框动态数据无法回显的问题
有关于selectpicker下拉框数据回显的问题,当查看一个对象的属性的时候, 发现有关于selectpicker的下拉框并没有将返回的数据进行回显,显示的都是请选择, 经查证,当查看属性的时候,他 ...
- gflags_static.lib 无法解析的外部符号 __imp__PathMatchSpec
在用gflags库时生成提示 无法解析的外部符号 __imp__PathMatchSpec 解决办法:Add "shlwapi.lib" to "Project - ...
- python之使用 wkhtmltopdf 和 pdfkit 批量加载html生成pdf,适用于博客备份和官网文档打包
0. 1.参考 Python 爬虫:把廖雪峰教程转换成 PDF 电子书 https://github.com/lzjun567/crawler_html2pdf wkhtmltopdf 就是一个非常好 ...
- 2018-2019-1 20189201《Linux内核原理与分析》第四周作业
1. 阴天☁️ 你说你爱烟雨微茫,雨来时你却伞遮霓裳: 你说你爱春光灿烂,阳光普照时你却孑然惆怅: 你说你爱微风轻柔,风拂发梢时你却紧闭门窗: 这便是为何你说你也深深爱我,我却眼波成霜. 2. 今日发 ...