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. <转>http协议 文件下载原理详解

    最近研究了一下关于文件下载的相关内容,觉得还是写些东西记下来比较好.起初只是想研究研究,但后来发现写个可重用性比较高的模块还是很有必要的,我想这也是大多数开发人员的习惯吧. 对于HTTP协议,向服务器 ...

  2. centos 7 开机优化shell

    vim  start_init.sh #!/bin/bash#####dns echo "nameserver 114.114.114.114" >/etc/resolv.c ...

  3. Python全栈开发:web框架们

    Python的WEB框架 Bottle Bottle是一个快速.简洁.轻量级的基于WSIG的微型Web框架,此框架只由一个 .py 文件,除了Python的标准库外,其不依赖任何其他模块. 1 2 3 ...

  4. C++ 系列:C++ 内存布局

    1 前言 了解你所使用的编程语言究竟是如何实现的,对于C++程序员可能特别有意义.首先,它可以去除我们对于所使用语言的神秘感,使我们不至于对于编译器干的活感到完全不可思议:尤其重要的是,它使我们在De ...

  5. 记 openSUSE 42.3 升级到Leap 15.0

    先将系统的软件更新到最新版本 sudo zypper update 删除42.3的软件源,若有其他数据源,如nginx的,也需要一并删除,可使用zypper lr -d 来查询 sudo zypper ...

  6. druapl-note1 本地开发上传模块不提示Ftp的警告

    刚安装完drupal之后,通过drupalxray 看到其它drupal网站安装的一些模块,下载好模块并安装时,提示需要输入Ftp信息. 但是本地开发不输入Ftp信息的(也不清楚自己的系统是否开启Ft ...

  7. [记]Cordova安装插件选择插件版本

    在项目中可以使用 cordova plugin add [PLUGIN_ID] 這个命令安装一个cordova插件,这个命令好像是安装插件的最新版本.当需要通过cordova下载这个插件一个特定的版本 ...

  8. 廖雪峰Java15JDBC编程-3JDBC接口-3JDBC更新

    使用update语句的时候,需要通过JDBC实现update语句的执行,这个时候仍然通过PreparedStatement对象来使用,直接传入update语句,然后通过setObject传入占位符的值 ...

  9. window 批量修改或去除文件后缀名

    for /r %i in (*.!ut) do ren "%i" *. 转自:https://blog.csdn.net/zhang_ruisen/article/details/ ...

  10. OCCT 7.4.0 beta version is available

    OpenCASCADE 7.4.0测试版本发布 OCC在9月16号发布了opencascade740 beta测试版本,新版本里面做了如下一些重点修改如下: 造型算法部分主要对网格化算法BRepMes ...