vue:页面跳转和传参(页面之间,父传子,子传父)
1、返回上一个页面:
A、<a @click="$router.back(-1)" class="btn">重新加载</a>
B、this.$router.push("tolink")
2、事件中路由跳转,兄弟组件之间传值:
this.$router.push({
path:'/world',
name:'world',
params:{
id:id
}
})
在另一个页面中获取这个参数
this.$router.params.id
3、父组件传参给子组件
父组件引入子组件并注册
import EquipmentdataDetails from './equipmentdata/EquipmentdataDetails'
components: {'equipmentdata-details':EquipmentdataDetails,},
<equipmentdata-details :toDeviceUnique=deviceUniqueTo></equipmentdata-details>
子组件中提前生命props
props: ['toDeviceUnique'],
4、子组件传参给父组件
父组件中引入并使用子组件,并提前声明一个方法
import EquipmentdataDetails from './equipmentdata/EquipmentdataDetails'
components: {'equipmentdata-details':EquipmentdataDetails,},
<equipmentdata-details @test=test></equipmentdata-details>
function test(data){ console.log(data) }
子组件中
this.$emit.('test',123)
这样子组件就调用了父组件的方法,并传了一个参数过去,父组件收到这个参数就能做一些操作
vue:页面跳转和传参(页面之间,父传子,子传父)的更多相关文章
- vue路由跳转取消上个页面的请求和去掉重复请求
vue路由跳转取消上个页面的请求和去掉重复请求 axios 的二次封装(拦截重复请求.异常统一处理) axios里面拦截重复请求
- vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题
最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...
- vue路由传参页面刷新参数丢失问题解决方案
最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...
- vue传参页面刷新数据丢失问题
在做vue的时候,经常会遇到组件之间数据的传递问题,通过params或者query传参,但是,当页面刷新的时候,数据会丢失,找不到数据.今天经过总结,解决了这个问题.通过了一下几种情况进行传值: 通过 ...
- vue滚动行为控制——页面跳转返回上一个页面保留滚动位置
需求分析: 一般这个功能在后台管理系统用的比较多,因为后台页面都是在当前页面打开,对于某些列表筛选页,如果列表数据比较多,页面就会滚动.当页面发生滚动,对列表数据进行查看或者编辑的时候,跳转到下一级页 ...
- Jsp页面跳转和js控制页面跳转的几种方法
Jsp 页面跳转的几种方法 1. RequestDispatcher.forward() 在服务器端起作用,当使用forward()时,Servlet engine传递HTTP请求从当前的Servle ...
- ionic4 页面跳转传值和新页面取值
页面跳转 : <ion-row *ngFor="let item of aboutData.stockData" [routerLink]="[ '/stock-d ...
- HTML做的网页 如何使当前页面跳转到另一页面锚点处
当前页面a.html另一页面b.html当前页面: <a href="b.html#aaa">跳转到b页面aaa处</a>另一页面:<a name=& ...
- 基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码
比如 想跳到 mao.aspx 的页面 的div id="s" 的位置 那么 只用<a href="mao.aspx#s"> 就可实现跳转到指定位置 ...
- iframe框架下的某一页面跳转到另外一个页面
//iframe只在当前页跳转 window.location = "/Admin/Blog/Index"; 只在当前页跳转 而不是整个页面都跳转
随机推荐
- redis集群服务启动
1 启动redis服务器 redis-server.exe redis.windows.conf 需要配置config节点的bind ip 2 启动redis集群 开启redis.xx.conf 服务 ...
- CDN上的缓存刷新、缓存预热是怎样的使用场景?
缓存刷新 源站内容更新后,希望用户可以获取到最新资源,CDN租户可以通过提交刷新请求将CDN节点上指定的缓存内容强制过期.当用户再次访问时,CDN节点将回源获取已更新内容返回给用户并在节点缓存最新资源 ...
- T-SQL 逻辑控制语句 ifelse while casewhen
ifelse,如果逻辑语句有多行,用begin end 包裹 use StudentManageDB go --查询成绩 declare @cAvg int select @cAvg=avg(CSha ...
- sqlserver基本增删查语句
use StudentManageDB go insert into Students (StudentName,Gender,Birthday,Age,StudentIdNo ,PhoneNumbe ...
- 集群Redis使用 Python pipline大批量插入数据
class myRedis(object): def __init__(self,redis_type=None,**args): if redis_type == " ...
- (转) C#之VS自带RDLC报表学习
原文地址:http://blog.csdn.net/hk_5788/article/details/49846905 原文工具VS2010,测试版本工具VS2013 报表是这样设计的: 看看结果: ...
- kafka的几个简单操作
怎么安装解压kafka这里就不多说了,从配置文件说起 我这里搭建的是三节点集群 master slave1 slave2 修改server.properties 文件 把自己本地安装的zookeep ...
- Django之Django debug toolbar调试工具
一.安装Django debug toolbar调试工具 pip3 install django-debug-toolbar 如果出错命令为 pip install django_debug_tool ...
- python库myqr生成二维码
python中有一个好玩的库,不仅可以生成各种花色的二维码,还可以生成动态二维码. MyQR是一个能够生成自定义二维码的第三方库,可以根据需要生成普通二维码.带图片的艺术二维码,也可以生成动态二维码 ...
- 《机器学习实战》KNN算法实现
本系列都是参考<机器学习实战>这本书,只对学习过程一个记录,不做详细的描述! 注释:看了一段时间Ng的机器学习视频,感觉不能光看不练,现在一边练习再一边去学习理论! KNN很早就之前就看过 ...