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

首先,配置页面跳转路由。在 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. MinGW 编译 libaom 1.0.0 注意事项

    CMake 后不生成 config/aom_version.h 文件 需要手动编写 #define VERSION_MAJOR 1 #define VERSION_MINOR 0 #define VE ...

  2. 什么是内部类? Static Nested Class 和 Inner Class 的不同。

    什么是内部类? Static Nested Class 和 Inner Class 的不同.        内部类就是在一个类的内部定义的类,内部类中不能定义静态成员(静态成员不是对象的特性,只是为了 ...

  3. mysql数据库基本语句

    我们除了可以在mysql数据库或phpmyadmin中登陆数据库我们还可以使用linux中命令进行创建,下面我来给大家介绍一个简单的数据库创建方法吧. 首选用putty连接linux服务器,进行命令行 ...

  4. 出错:Cause: org.apache.ibatis.executor.ExecutorException: A query was run and no Result Maps were found for the Mapped Statement 'cn.mgy.mapper.UserMapper.findById'.

    详细出错代码: org.apache.ibatis.exceptions.PersistenceException: ### Error querying database. Cause: org.a ...

  5. golang mysql 的 packet sequence error 这个错

    在公司用golang 写了个插入外链数据的服务,这服务是2016年写的,大概作用就是,python 爬取的数据,要同步到 wordpress中,golang就负责,将数据整理,图片下载弄到 wordp ...

  6. sort实现ip排序

    说明: 工具:sort linux自带        ”-t” : 表示以那个字符做分割        “-k” :和-t结合使用,表示取那一段为关键字进行排序,后面跟数据,1…n,表示取第几段,也可 ...

  7. BZOJ4503 两个串 多项式 FFT

    题目传送门 - BZOJ4503 题意概括 给定两个字符串S和T,回答T在S中出现了几次,在哪些位置出现.注意T中可能有?字符,可以匹配任何字符. 题解 首先,假装你已经知道了这是一道$FFT$题. ...

  8. UOJ#276. 【清华集训2016】汽水 二分答案 点分治

    原文链接https://www.cnblogs.com/zhouzhendong/p/UOJ276.html 题解 首先,读入的时候就将所有的 $w_i$ 减掉 $k$ . 于是我们要求的就是平均值最 ...

  9. 查看linux空间大小

    du -sh : 查看当前目录总共占的容量.而不单独列出各子项占用的容量 du -lh --max-depth=1 : 查看当前目录下一级子文件和子目录占用的磁盘容量.

  10. Imcash:坐下来认真和你们说说话

    筹备已久的Imcash终于快上线了,上线后会用作品向你们证明你们的选择是正确的.在准备的半年期间里,团队从调研.设计.市场.人员.技术方面都尽量按照最高要求来配置.从一站式服务平台到现在的资产管家,每 ...