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

首先,配置页面跳转路由。在 router/index.js 中配置相应的页面跳转路由,如下所示:

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

通过 query 传递的参数信息在请求路径中,参数信息明文显示在请求 URL 上。通过当前的设置方式,若强制刷新页面,则表单内容也不会丢失。

再次,跳转页面接收参数设置。在 export default 可通过 $route.params 进行获取请求参数信息,并在页面初始化的时候,进行修改表单数据的绑定操作,如下所示:

通过如上设置,即可在页面跳转的时,通过路由进行表单参数的信息传递。

VUE-008-通过路由 router.push 传递 query 参数(路由 path 识别,请求链接显示参数传递)的更多相关文章

  1. VUE-007-通过路由 router.push 传递 query 参数(路由 name 识别,请求链接显示参数传递)

    在前端页面表单列表修改时,经常需要在页面切换的时候,传递需要修改的表单内容,通常可通过路由进行表单参数的传递. 首先,配置页面跳转路由.在 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. 【原创】数据库基础之Mysql(2)主从库配置

    一 安装 # wget -i -c http://dev.mysql.com/get/mysql57-community-release-el7-10.noarch.rpm# yum -y insta ...

  2. C#+EntityFramework编程方式详细之Code First 数据迁移

    在前几篇的C#+EntityFramework编程方式中介绍了C#+EntityFramework编程方式Code First ,Model First以及Dtatabase First 等编程方式, ...

  3. PHP之static静态变量详解

    在看别人项目过程中,看到函数里面很多static修饰的变量,关于static修饰的变量,作用域,用法越看越困惑,所以查了下资料. static用法如下: 1.static 放在函数内部修饰变量 2.s ...

  4. 《剑指offer》把数组排成最小的数

    本题来自<剑指offer> 反转链表 题目: 思路: C++ Code: Python Code: 总结:

  5. Nginx Linux详细安装部署教程

    一.Nginx简介 Nginx是一个web服务器也可以用来做负载均衡及反向代理使用,目前使用最多的就是负载均衡,具体简介我就不介绍了百度一下有很多,下面直接进入安装步骤 二.Nginx安装 1.下载N ...

  6. Spring Boot 读取 resource 下文件

    支持linux下读取 import org.springframework.core.io.ClassPathResource; public byte[] getCertStream(String ...

  7. 【JavaScript】 使用extend继承对象的prototype方法

    之前有学习过通过prototype模式来构造类,并通过prototype来添加方法.好处大概有以下几点: 1.类方法可以都放在prototype中,可以提高性能效率. 2.可以用prototype来实 ...

  8. springboot的jar包

    公用jar包放在api层.有些却包的不用增加pom文件.将已存在的jar包加入即可

  9. 【Spring Boot】关于上传文件例子的剖析

    目录 Spring Boot 上传文件 功能实现 增加ControllerFileUploadController 增加ServiceStorageService 增加一个Thymeleaf页面 修改 ...

  10. 百度语音+react+loopback实现语音合成返回播放

    1.在百度语音中创建自己的项目,需要拿到APP_ID.API_KEY.SECRET_KEY. 2.loopback端提供接口服务,在./boot目录下新建root.js文件,编写不依赖模型的自定义接口 ...