Vue. 之 刷新当前页面,重载页面数据
Vue. 之 刷新当前页面,重载页面数据
如下截图,点击左侧不同的数据,右侧根据左侧的KEY动态加载数据。由于右侧是同一个页面,在进行路由跳转后,不会再次刷新数据。

解决方案:
右侧的页面中 script代码块添加:watch模块,如下代码:
... ... mounted : function() {
this.loadData();
},
watch: {
//监听相同路由下参数变化的时候,从而实现异步刷新
'$route'(to,from) {
this.loadData();
},
},
methods: {
loadData() {
let varCode = this.$route.query.varCode;
this.api.service
.gets({
varCode: varCode
})
.then(res => {
console.log(res)
})
}, ... ...
Vue. 之 刷新当前页面,重载页面数据的更多相关文章
- vue 使用localStorage解决vuex在页面刷新后数据被清除的问题
通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一 ...
- [转]vue解决刷新页面vuex数据、params参数消失的问题
一般项目都会有一些逻辑需要传递值给另一个页面,那么有的时候就会出现一个问题:用户刷新了页面,诶?数据没了,参数错误.那么今天经过总结,解决了这个问题.我在最新的项目中,通过了一下几种情况进行传值: 1 ...
- vue项目刷新页面,使数据不丢失(sessionStorage、localStorage、cookie)
vue项目刷新页面时,存储在vuex中的数据会丢失,把他们存到stroage中可以保证不丢失.
- vue主动刷新页面及列表数据删除后的刷新方法
在继刷新当前页面,重载页面数据那篇之后 那一篇 深入理解数据驱动 以上算是开发过程中的一个坑,用了一段时间,今天再读代码的时候,感觉被坑的很严重. 1. 获取列表方法 2.重新获取数据 3.这样再次调 ...
- Vue刷新页面VueX中数据清空了,怎么重新获取?
Vue刷新页面VueX数据清空了,怎么重新获取? 点击打开视频讲解更详细 在vue中刷新页面后,vuex中的数据就没有了,这时我们要想使用就要重新获取数据了, 怎么在刷新后重新获取数据呢??? 这时我 ...
- Vue 路由切换时页面内容刷新页面并更新数据
第二次进入页面,页面路由参数已经改变,但是页面内容不会刷新 <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM <keep-aliv ...
- vue中使用provide和inject刷新当前路由(页面)
1.场景 在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求. 2.遇到的问题 1. 用vue-router重新路由到当前页面,页面是不进行刷新的 2.采用window.rel ...
- 对于vue和react“页面间”传递数据的理解误区
前言 如果我们想要实现多个标签页之间的通信,可以使用localStorage.cookie等,但是能不能用vue或react呢? 结论 答案是NO,因为vue和react虽然可以在“多个”页面之间传递 ...
- vue案例 - vuex+sessionstorage解决vue项目刷新后页面空白/数据丢失
第一部分 SessionStorage 首先查看sessionStorage的地方在控制台的 Application > Storage > Session Storage这里: 根据se ...
随机推荐
- ASP.NET自定义Validform的datatype
1.定义 <script type="text/javascript"> $(function () { $("#aa").Validform({ ...
- Spring IOC基础回顾 — 组件扫描和装配
目录 注解形式配置应用IOC 1. 组件自动扫描 2. 组件依赖:为bean添加注解,实现自动注入 3. Spring IOC应用小结 注解形式配置应用IOC 在类定义.方法定义.成员变量定义前使用, ...
- Java 11 发布计划来了,已确定 3个 新特性!!
Oracle 已经发布了 Java Development Kit 10,下一个版本 JDK 11 也在准备之中了.按照 Java 新的版本发布标准,Java 11 将在 6 个月后到来,现在它还只有 ...
- Pycharm2019.1.3安装程序以及教程
链接:https://pan.baidu.com/s/1TF--EyCUQgmPeXFaCMJm8w 提取码:5vme
- InfluxDB的安装和简介
InfluxDB简介 InfluxDB是一个时间序列数据库,旨在处理高写入和查询负载.它是TICK堆栈的组成部分 .InfluxDB旨在用作涉及大量带时间戳数据的任何用例的后备存储,包括DevOps监 ...
- <小知识>记录
lis = [2,3,"k",["qwe",20,["k1",["tt",3,"1"]],89],& ...
- [AHOI2014/JSOI2014]骑士游戏
题目 思博贪心题写了一个半小时没救了,我也没看出这是一个\(spfa\)来啊 设\(dp_i\)表示彻底干掉第\(i\)只怪物的最小花费,一个非常显然的事情,就是对于\(k_i\)值最小的怪物满足\( ...
- C#真他妈神奇,一个函数都不用写就能实现一个简单的邮件发送工具
MailMessage EmaillMessage = new MailMessage( //创建一个对象 new MailAddress(loning.Te ...
- JS时间比较大小
目录 1. 时间比较 2. 时间戳比较 3. 日期比较方法 4. 参考 1. 时间比较 var curTime = new Date(); //把字符串格式转化为日期类 var starttime = ...
- 2019-9-2-贡献自己的服务器搭建tor中转
title author date CreateTime categories 贡献自己的服务器搭建tor中转 lindexi 2019-09-02 12:57:38 +0800 2018-2-13 ...