VUE-006-通过路由 router.push 传递 params 参数(路由 name 识别,请求链接不显示)
在前端页面表单列表修改时,经常需要在页面切换的时候,传递需要修改的表单内容,通常可通过路由进行表单参数的传递。
首先,配置页面跳转路由。在 router/index.js 中配置相应的页面跳转路由,如下所示:
其次,在相应页面的 index.vue 中的 methods 创建相应的方法,通过 $router.push 进行页面跳转及参数传递。如下所示:
通过 params 传递的参数信息在请求体中,不体现在请求 URL 上。通过当前的设置方式,若是强制刷新页面,则表单内容会丢失。
再次,跳转页面接收参数设置。在 export default 可通过 $route.params 进行获取请求参数信息,并在页面初始化的时候,进行修改表单数据的绑定操作,如下所示:
通过如上设置,即可在页面跳转的时,通过路由进行表单参数的信息传递。
补充说明:
在通过路由传递参数时,也可直接传递表单对象信息,无需添加 codeInfo。此种方式较之第一种方式更加简洁(墙裂推荐)。
VUE-006-通过路由 router.push 传递 params 参数(路由 name 识别,请求链接不显示)的更多相关文章
- VUE-008-通过路由 router.push 传递 query 参数(路由 path 识别,请求链接显示参数传递)
在前端页面表单列表修改时,经常需要在页面切换的时候,传递需要修改的表单内容,通常可通过路由进行表单参数的传递. 首先,配置页面跳转路由.在 router/index.js 中配置相应的页面跳转路由,如 ...
- VUE-007-通过路由 router.push 传递 query 参数(路由 name 识别,请求链接显示参数传递)
在前端页面表单列表修改时,经常需要在页面切换的时候,传递需要修改的表单内容,通常可通过路由进行表单参数的传递. 首先,配置页面跳转路由.在 router/index.js 中配置相应的页面跳转路由,如 ...
- vue-router同路由$router.push不跳转一个简单解决方案
vue-router同路由$router.push不跳转一个简单解决方案 vue-router跳转一般是这么写: toCurrentPage: function(thisId){ this.$rout ...
- VUE-010-通过声明式导航 router-link 传递 params 参数(路由 name 识别,请求链接不显示参数传递)
在前端页面表单列表修改时,经常需要在页面切换的时候,传递需要修改的表单内容,除了通过路由进行表单参数的传递,也可通过声明式导航 router-link 进行页面跳转和参数传递. 首先,配置页面跳转路由 ...
- vue.js 中this.$router.push()的使用
在vue项目中,跳转可以用router-link直接跳到某个页面 因为有时候会需要做一些判断等情况,所以要用到 this.$router.push() 因为外链跳转根本就不在router的设计考虑范围 ...
- Vue页面跳转$router.push 的用法
vue2.0在使用的过程中, .vue文件之间的跳转,在template中的常见写法是: <router-link to="/miniCard/statement/horizon&qu ...
- [转]vue解决刷新页面vuex数据、params参数消失的问题
一般项目都会有一些逻辑需要传递值给另一个页面,那么有的时候就会出现一个问题:用户刷新了页面,诶?数据没了,参数错误.那么今天经过总结,解决了这个问题.我在最新的项目中,通过了一下几种情况进行传值: 1 ...
- 关于Vue中,$this.router.push到当前页面,只是传入参数不同,页面不刷新的问题解决
在页面的watch中,监听$router的变化 watch: { $route (to, from) { this.$router.go(0) } } 其中this.$router.go(0)为刷新页 ...
- Vue设置路由跳转的两种方法: <router-link :to="..."> 和router.push(...)
一.<router-link :to="..."> to里的值可以是一个字符串路径,或者一个描述地址的对象.例如: // 字符串 <router-link to= ...
随机推荐
- 让CPU占用率曲线听你指挥
使用GetTickCount()和Sleep(): Code#include <stdio.h> #include <unistd.h> #include <time.h ...
- sublim 插件
sublim 插件 https://www.cnblogs.com/hykun/p/sublimeText3.html html 代码自动 + tab ul>li>img+p+a ! ul ...
- JsRender练习总结
1.假设的数据,基础部分. <div id="list1"></div> <script type="text/tmp" id=& ...
- Java面试题复习笔记(Web方向)
1.Http中get和post请求的区别? 共同点:都是Http请求方式,用户可以通过不同的请求方式完成对资源(Url)的操作.具体来讲就是get一般用于获取/查询资源信息,post用于更新资源信息. ...
- Python内置函数之-property
property 是一个内置的装饰器函数,只在面向对象中使用 求一个圆的周长和面积 # 周长和面积都是通过类的方法得到from math import pi class Cricle: def __i ...
- 饮冰三年-人工智能-Python-24 Django ORM增删改查
一:首先使用默认的sqlite3创建表 1:现在在models.py中添加表模型 from django.db import models # Create your models here. cla ...
- Redis数据类型List
Redis的List是通过Linked List(链表)来实现的String集合,所以插入数据的速度很快.但是缺点就是在数据量比较大的时候,访问某个数据的时间可能会很长,但针对这种情况,可以使用Sor ...
- Redis数据类型Hash
Redis的Hash有点像一个对象(object),一个Hash里面可以存多个Key-Value对作为它的field,所以它通常可以用来表示对象.Hash里面能存放的值也能作为String类型来存储, ...
- lxml.etree.HTML(text) 解析HTML文档
0.参考 http://lxml.de/tutorial.html#the-xml-function There is also a corresponding function HTML() for ...
- .net OADate 转javascript的Datetime js 5位 日期 转换
以下是将.net的OADate转成javascript的DateTime函数. 其中参数oadate是.net那里传过来的UTC时间的double.记得 一定是UTC时间. .net Double o ...