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

首先,配置页面跳转路由。在 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. OpenCV3编程入门-读书笔记1

    一.OpenCV概述 1.OpenCV全程Open Source Computer Vision Library,即开源计算机视觉库.它是一个跨平台的开源计算机视觉库,可以运行在windows.lin ...

  2. 并发研究之CPU缓存一致性协议(MESI)

    CPU缓存一致性协议MESI CPU高速缓存(Cache Memory) CPU为何要有高速缓存 CPU在摩尔定律的指导下以每18个月翻一番的速度在发展,然而内存和硬盘的发展速度远远不及CPU.这就造 ...

  3. 开启Golang编程第一章

    Go is an open source programming language that makes it easy to build simple,reliable, and effcient ...

  4. Maya cmds pymel scriptJob() 和 undoInfo() 在回调中撤销(undo)

    Maya cmds pymel scriptJob() 和 undoInfo() 在回调中撤销(undo) def myEventFun(): cmds.undoInfo(stateWithoutFl ...

  5. 一次国际化记录以及平铺JSON数据

    ​ 写这个方法的原因是因为我们需要改版国际化,因为相同的项目有其他分支做过国际化,但是主版本没有进行过国际化,目前需要修改主版本的国际化,但是因为国际化的方式做了结构上的调整所以写了这个工具方法方便去 ...

  6. 【JavaScrpt】JS之数组去重

    var arr = [] var peoples = [ {id:1,name:'wang'}, {id:2,name:'zhang'}, {id:2,name:'zhang'}, ] for(let ...

  7. 一道简单的dp题 --- Greenhouse Effect CodeForces - 269B

    题目链接: https://vjudge.net/problem/36696/origin 题目大意: 要求从1到m升序排列,点可以随意移动,问最少需要移动多少次, 思路: 动态规划 可以推出转移方程 ...

  8. [PKUSC2018]星际穿越

    [PKUSC2018]星际穿越 题目大意: 有一排编号为\(1\sim n\)的\(n(n\le3\times10^5)\)个点,第\(i(i\ge 2)\)个点与\([l_i,i-1]\)之间所有点 ...

  9. 04-JQuery

    今日任务 使用JQuery完成页面定时弹出广告 定时器: ​    setInterval     clearInterval ​    setTimeout    clearTimeout 显示:  ...

  10. 201771010118《面向对象程序设计(java)》第四周学习总结

    1.实验目的与要求 (1) 理解用户自定义类的定义: (2) 掌握对象的声明: (3) 学会使用构造函数初始化对象: (4) 使用类属性与方法的使用掌握使用: (5) 掌握package和import ...