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

首先,配置页面跳转路由。在 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. Java框架中Struts和Struts2框架的区别

    struts1 与 struts2 的区别:1.都是 MVC 的 WEB 框架,2 struts1的老牌框架,应用很广泛,有很好的群众基础,使用它开发风险很小,成本更低!struts2虽然基于这个框架 ...

  2. Java框架中Struts框架的优缺点

    Struts 优缺点优点:1. 实现 MVC 模式,结构清晰,使开发者只关注业务逻辑的实现.2.有丰富的 tag 可以用 ,Struts 的标记库(Taglib),如能灵活动用,则能大大提高开发效率3 ...

  3. Reveal 使用详解

    Reveal是一款调试iOS程序UI界面的神器 官网:https://revealapp.com 下载:https://revealapp.com/download/ 建议下载至少Reveal4版本, ...

  4. 使用Selenium+ChromeDriver登录微博并且获取cookie

    using OpenQA.Selenium;using OpenQA.Selenium.Chrome; public class GetSinaCookie { private static stri ...

  5. ansible的tests

    Ansible的tests : 路径 /usr/lib/python2.7/site-packages/ansible/plugins/test core.py # failure testing ' ...

  6. html_头部<meta>设置

    <!DOCTYPE html> : 定义HTML的规则类型:浏览器兼容性最好 <!DOCTYPE html><html> <head> <!--编 ...

  7. spring的xml配置声明以及相应的问题处理

    spring的xml配置声明:  xml配置声明 Code 问题处理 问题1 xml报错: cvc-elt.1: Cannot find the declaration of element 'bea ...

  8. JS this用法详解

        随着对js的深入学习和使用,你会发现它里面包含了很多令人困惑的机制,比如对象.闭包.原型链继承等等 1.this是啥? 简言之,this是JavaScript语言中定义的众多关键字之一,它的特 ...

  9. Windows应用程序组成及编程步骤

    Windows应用程序组成及编程步骤: 1.应用程序的组成:一个完整的Windows应用程序通常由五种类型的文件组成 1.C语言源程序文件 2.头文件 3.模块定义文件 4.资源描述文件 5.项目文件 ...

  10. Java之为何配置环境变量

    一.不要问一个程序员为什么命名是基础零(^_^) 二.Java为什么跨平台: 因为有java虚拟机,一个程序的运行必然要依赖于系统,java的跨平台是因为java虚拟机jvm把不同平台编写的代码编译成 ...