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. 之 刷新当前页面,重载页面数据的更多相关文章

  1. vue 使用localStorage解决vuex在页面刷新后数据被清除的问题

    通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一 ...

  2. [转]vue解决刷新页面vuex数据、params参数消失的问题

    一般项目都会有一些逻辑需要传递值给另一个页面,那么有的时候就会出现一个问题:用户刷新了页面,诶?数据没了,参数错误.那么今天经过总结,解决了这个问题.我在最新的项目中,通过了一下几种情况进行传值: 1 ...

  3. vue项目刷新页面,使数据不丢失(sessionStorage、localStorage、cookie)

    vue项目刷新页面时,存储在vuex中的数据会丢失,把他们存到stroage中可以保证不丢失.

  4. vue主动刷新页面及列表数据删除后的刷新方法

    在继刷新当前页面,重载页面数据那篇之后 那一篇 深入理解数据驱动 以上算是开发过程中的一个坑,用了一段时间,今天再读代码的时候,感觉被坑的很严重. 1. 获取列表方法 2.重新获取数据 3.这样再次调 ...

  5. Vue刷新页面VueX中数据清空了,怎么重新获取?

    Vue刷新页面VueX数据清空了,怎么重新获取? 点击打开视频讲解更详细 在vue中刷新页面后,vuex中的数据就没有了,这时我们要想使用就要重新获取数据了, 怎么在刷新后重新获取数据呢??? 这时我 ...

  6. Vue 路由切换时页面内容刷新页面并更新数据

    第二次进入页面,页面路由参数已经改变,但是页面内容不会刷新 <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM <keep-aliv ...

  7. vue中使用provide和inject刷新当前路由(页面)

    1.场景 在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求. 2.遇到的问题 1. 用vue-router重新路由到当前页面,页面是不进行刷新的 2.采用window.rel ...

  8. 对于vue和react“页面间”传递数据的理解误区

    前言 如果我们想要实现多个标签页之间的通信,可以使用localStorage.cookie等,但是能不能用vue或react呢? 结论 答案是NO,因为vue和react虽然可以在“多个”页面之间传递 ...

  9. vue案例 - vuex+sessionstorage解决vue项目刷新后页面空白/数据丢失

    第一部分 SessionStorage 首先查看sessionStorage的地方在控制台的 Application > Storage > Session Storage这里: 根据se ...

随机推荐

  1. HDU-1501-Zipper-字符串的dfs

    Given three strings, you are to determine whether the third string can be formed by combining the ch ...

  2. 【bzoj 2870】 最长道路tree

    题目 边分治 边分和点分相比就是找到一条重心边,考虑所有经过这条边的路径,之后断开这条边分成两个联通块,继续分治 由于每次分治重心是一条边,所以只会产生两个联通块,考虑两个联通块显然要比像点分那样考虑 ...

  3. P3338 [ZJOI2014]力 /// FFT 公式转化翻转

    题目大意: https://www.luogu.org/problemnew/show/P3338 题解 #include <bits/stdc++.h> #define N 300005 ...

  4. 《Practices of an Agile Developer:Woring in the Real World》读书笔记 PB16110698(~3.22)第三周

    <Practices of an Agile Developer:Woring in the Real World>读书笔记  本周我阅读了<高效程序员的45个习惯:敏捷开发修炼之道 ...

  5. 一个WordCount执行过程的实例

  6. UMP系统功能 读写分离

  7. hudson通过ant自动编译、启动、停止java的jar

    set ANT_PATH=E:\soft\apache_ant\bine:cd E:\data\codex\server\trunk\serversvn up @echo.@echo.@echo &q ...

  8. 串口通信中,QString 、QByteArray 转化需要注意的问题

    在做串口通信的时候,其中犯了一个错误.在此记录一下:QT中串口通信接到收据和发送数据的接口如下: QByteArray QIODevice::readAll()//接受数据 qint64 QIODev ...

  9. 流程控制&&函数

    1.if 条件语句 if 判断条件: 执行语句…… elif 判断条件: 执行语句…… else: 执行语句…… 2.for 循环 ''' for 后跟变量名,in 后跟序列,注意加冒号 for 循环 ...

  10. GROUP方法也是连贯操作方法之一

    GROUP方法也是连贯操作方法之一,通常用于结合合计函数,根据一个或多个列对结果集进行分组 . group方法只有一个参数,并且只能使用字符串. 例如,我们都查询结果按照用户id进行分组统计: $th ...