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

首先,配置页面跳转路由。在 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. .NET垃圾回收机制(一)

    垃圾收集器(GarbageCollection)是组成.Net平台一个很重要的部分,.NET垃圾回收机制降低了编程复杂度,使程序员不必分散精力去处理析构.不妨碍设计师进行系统抽象.减少了由于内存运用不 ...

  2. 代码中三种特殊注释——TODO、FIXME、XXX

    在eclipse中,TODO.FIXME和XXX都会被eclipse的task视图所收集.在项目发布前,检查一下task视图是一个很好的习惯.进入window→show view→Other→输入ta ...

  3. eclise开发设置

    eclipse在debug模式下鼠标移动到变量上不显示值的问题 在eclipse中调试时,鼠标移动到变量上不显示值,使用ctrl+shift+i,或者通过配置达到目的:  Window->Pre ...

  4. Consideration about improving mathematics study

    In this article, I’ll present my ideas about how to improve mathematics study, which are the forewor ...

  5. + CategoryInfo : NotSpecified: (:) [], PSSecurityException + FullyQualifiedErrorId : RuntimeException

    File C:\Users\danv\Documents\WindowsPowerShell\profile.ps1 cannot be loaded because the execution of ...

  6. Redis数据结构之sds基本操作函数

    本文及后续文章,Redis版本均是v3.2.8 本篇文章讲解sds基本操作函数,我们从源码角度来进一步理解. 一.sds创建函数和销毁 sds创建函数 /* Create a new sds stri ...

  7. 横向滑动的listview和其中用到的触摸监听事件详解

    一.首先把横向的listview的代码放上来 HorizontalListView: package com.common.cklibrary.utils.myview; import java.ut ...

  8. 141. 环形链表 [JS Undefined类型的运用]

    [解析] 1.遍历每个节点 2.遍历过的节点用新的空间来标记 JS新的空间不用在使用前声明,用法参考实现. 3.如果遇到标记过的节点则是环形 [实现] /** * Definition for sin ...

  9. aspnet mvc 中 跨域请求的处理方法

    ASP.NET 处理跨域的两种方式    方式1,后端程序处理.原理:给响应头加上允许的域即可,*表示允许所有的域                 定义一个cors的过滤器 加在在action或者co ...

  10. C#订阅与发布标准实现

    大概看了下C#官方提供的IObservable接口以及IObserver接口来实现发布和订阅,写的很标准,很有代表性,做下笔记,以后要是项目需要用到发布订阅再基于自己的需求改: public clas ...