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. JS 常用的两个客户端输出方法

    document.write(str)   描述:在网页的<body>标记,输出str的内容.   document意思“文档”,就是整个网页了.   document是一个文档对象,代表 ...

  2. JavaWeb三大组件—过滤器filter

    JavaWeb三大组件 1. 都需要在web.xml中进行配置ServletListener(2个感知监听器不需要配置)Filter 2. 过滤器 它会在一组资源(jsp.servlet..css.. ...

  3. R:ggplot2数据可视化——进阶(2)

    Part 2: Customizing the Look and Feel, 更高级的自定义化,比如说操作图例.注记.多图布局等  # Setup options(scipen=999) librar ...

  4. Apache下更改.htaccess文件名称

    有时候我们需要更改.htaccess的名称以解决一些问题 比如:Eclipse下是不显示点开头的文件的 所以我们可以使用  Apache的AccessFileName来更改此配置文件的名称 Acces ...

  5. 2017.1.16【初中部 】普及组模拟赛C组总结

    2017.1.16[初中部 ]普及组模拟赛C组 这次总结我赶时间,不写这么详细了. 话说这次比赛,我虽然翻了个大车,但一天之内AK,我感到很高兴 比赛 0+15+0+100=115 改题 AK 一.c ...

  6. raft学习

    http://thesecretlivesofdata.com/raft/ 选举 角色:  leader 领导者 Follower跟随者  Candidate候选者 如果跟随者在一定时间内,么有收到领 ...

  7. intrinsicContentSize和Content Hugging Priority

    Mgen | 首页 | | 发新文章 | 联系 | 订阅  | 管理 iOS: 在代码中使用Autolayout (2) - intrinsicContentSize和Content Hugging ...

  8. 深入浅出 Java Concurrency (28): 线程池 part 1 简介[转]

    从这一节开始正式进入线程池的部分.其实整个体系已经拖了很长的时间,因此后面的章节会加快速度,甚至只是一个半成品或者简单化,以后有时间的慢慢补充.完善. 其实线程池是并发包里面很重要的一部分,在实际情况 ...

  9. 使用Java代码获取Java进程ID的方法

    需要jre/lib下的tools.jar包 public class Test { public static void main(String[] args) throws Exception {  ...

  10. Netty SimpleChannelInboundHandler和ChannelInboundHandler区别

    一般用netty来发送和接收数据都会继承SimpleChannelInboundHandler和ChannelInboundHandlerAdapter这两个抽象类,那么这两个到底有什么区别呢? 在客 ...