为什么会有这篇文章

  在vue2.0中出现了列表页面是每次都重新加载数据,但是详情页面却只在第一次加载的时候调用数据,如果返回到列表再进入详情那么页面是不会重新渲染页面。

  1 用vue-router 重新路由的时候到当前页面的时候是不进行刷新的

  2 采用window.reload() 或者router.go(0) hisory.go(0) 刷新的时候整个浏览器进行刷新加载, 但是页面闪烁, 体验不好

  

 解决方法1:

  用watch监听路由是否变化,如果变化重新加载数据

watch: {
'$route': function() {
this.listts();  // 这边调用获取数据的方法
}
},

 解决方法2:

<template>
<div id="app">
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
</template>

使用Vue组件切换过程钩子activated(keep-alive组件激活时调用),而不是挂载钩子mounted:

<script>
export default {
// ...
activated: function() {
this.getCase()
}
}
</script>

vue之页面缓存问题(基于2.0)的更多相关文章

  1. vue相关文件说明(基于vue2.0)

    1.config:生产,开发环境配置参数 2.static:第三方资源,这里面的文件直接写路径,不能用'import'导入 3.node_modules:引入一些依赖包 4..babelrc:定义了E ...

  2. vue多页面项目搭建(vue-cli 4.0)

    1.创建vue项目 cmd命令执行 vue create app (app 自定义的项目名) 一般都会选择后者,自己配置一下自己需要的选项(空格为选中) 这是我个人需要的一些选项,路由Router.状 ...

  3. 基于vue2.0打造移动商城页面实践 vue实现商城购物车功能 基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果

    基于vue2.0打造移动商城页面实践 地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能 地址:http://www.jb51.net/art ...

  4. 关于vue里页面的缓存

    keep-alive是vue内置的一个组件,可以使被它包含的组件处于保留状态,或避免被重新渲染. 用法: 运行结果描述: input输入框内,路由切换输入框内部的内容不会发生改变. 在keep-ali ...

  5. 部署基于.netcore5.0的ABP框架后台Api服务端,以及使用Nginx部署Vue+Element前端应用

    前面介绍了很多关于ABP框架的后台Web API 服务端,以及基于Vue+Element前端应用,本篇针对两者的联合部署,以及对部署中遇到的问题进行处理.ABP框架的后端是基于.net core5.0 ...

  6. Vue 之keep-alive的使用,实现页面缓存

    什么是keep-alive 有时候我们不希望组件被重新渲染影响使用体验: 或者处于性能考虑,避免多次重复渲染降低性能.而是希望组件可以缓存下来,维持当前的状态.这时候就需要用到keep-alive组件 ...

  7. vue中keep-alive,include的指定页面缓存问题

    做vue项目时,有时要在某些页面做缓存,而其它页面不要.比如:A:首页,B:获取所有订单页面,C:订单详情页面:从A(首页)进入 B(获取所有订单)时应该不缓存,B(所有订单)进入 C(订单详情)订单 ...

  8. yii2.0缓存篇之页面缓存

    页面缓存: 如果整个页面都不会发生改变,就可以使用页面缓存缓存整个页面. public function behaviors(){            //此方法[也叫行为]会提前控制器内其他方法执 ...

  9. 基于vue2.0的在线电影APP,

    基于vue2.0构建的在线电影网[film],webpack + vue + vuex + vue-loader + keepAlive + muse-ui + cordova 全家桶,cordova ...

随机推荐

  1. 多tomcat服务和nginx负载均衡配置

    1.nginx服务安装及配置,详见:linux 配置之安装nginx 2.多个tomcat服务安装及配置,详见:linux 配置多个tomcat 3.关键配置nginx.conf文件 http { i ...

  2. 002-python函数、高级特性

    1.函数 1.1 定义函数 在Python中,定义一个函数要使用def语句,依次写出函数名.括号.括号中的参数和冒号:,然后,在缩进块中编写函数体,函数的返回值用return语句返回 自定义一个求绝对 ...

  3. Golang:线程 和 协程 的区别

    作者:林冠宏 / 指尖下的幽灵 博客:http://www.cnblogs.com/linguanh/ GitHub : https://github.com/af913337456/ 掘金:http ...

  4. 两小无猜的爱恨情仇--java =+和+=揭秘

    故事背景 当一个人问另一个人“敢不敢”的时候,另一个人必须说“敢”,这就是游戏的规则.小男孩朱利安和小女孩苏菲的相遇即开始于这样一场孩童的闹剧,一个精美的铁盒子就是他们游戏的见证.说脏话,扰乱课堂,在 ...

  5. SpringBoot系列:Spring Boot使用模板引擎Thymeleaf

    一.Java模板引擎 模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档. 在jav ...

  6. 计算机视觉(二)-opencv之createTrackbar()详解

    摘要: 我学习openCV3看的是<学习openCV3>这本书,很厚的一本,不知道是不是因为自己看的还不是很多,个人觉得里面的有些重要函数讲的不是很详细,比如createTrackbar( ...

  7. Android 世界中,谁喊醒了 Zygote ?

    本文基于 Android 9.0 , 代码仓库地址 : android_9.0.0_r45 文中源码链接: SystemServer.java ActivityManagerService.java ...

  8. 杂谈:开发人员如何进行复杂业务的学习?让boss刮目相看

    一点小拙见,欢迎指正 一.概述 大型复杂的软件系统,是有许多人共同协作完成的,有些产品的业务是很复杂的,其在需求文档,及开发规范上都做得很好,不然维护的人越多,没有文档和规范去限制,岂不更加乱套. 如 ...

  9. jquery经常用到的代码段

    1.1jquery实现手风琴效果 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"&g ...

  10. 【TencentOS tiny】深度源码分析(2)——调度器

    温馨提示:本文不描述与浮点相关的寄存器的内容,如需了解自行查阅(毕竟我自己也不懂) 调度器的基本概念 TencentOS tiny中提供的任务调度器是基于优先级的全抢占式调度,在系统运行过程中,当有比 ...