为什么会有这篇文章

  在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. Linux 文件或文件夹重命名命令mv

    使用命令mv既可以重命名,又可以移动文件或文件夹.例如: 1.将目录A重命名为B mv A B 2.将/a目录移动到/b下,并重命名为c mv /a /b/c 3.将一个名为abc的文件重命名为123 ...

  2. springboot启动后自动退出

    有时新建的springboot启动后自动退出运行,如图所示: 此种情况大都数是因为pom文件加入了tomcat的依赖,与springboot内嵌的tomcat冲突导致,所以只需将pom文件中的tomc ...

  3. Python基础(十五)

    今日主要内容 模块初识 模块导入 模块路径 自定义模块 内置模块(标准库) time datetime random sys os funtools 一.模块初识 (一)什么是模块 其实我们创建的每一 ...

  4. jQuery鼠标滑过横向时间轴效果

    jQuery鼠标滑过横向时间轴效果---效果图: jQuery鼠标滑过横向时间轴效果---全部代码: <!DOCTYPE html> <html> <head> & ...

  5. logrotate 不生效

    登录服务器查看,发现日志没有自动切割.去查看micros配置文件: [root@ecs-11-151 ~]# cat /etc/logrotate.d/micros /data/logs/*/*.lo ...

  6. 【博客美化】添加github图标

    <a href="https://github.com/cai3231" target="_blank"> <img style=" ...

  7. Python3 学习笔记之 类型/运算符

    类型/运算符: 类型: 整数 字符串 浮点数 布尔类型 类型转换: 检查类型: 算术操作符: 逻辑操作符: 优先级:

  8. Redis系列总结--这几点你会了吗?

    文章原创于公众号:程序猿周先森.本平台不定时更新,喜欢我的文章,欢迎关注我的微信公众号. 前面几篇已经对Redis中几个关键知识点做了介绍,本篇主要对Redis系列做一下总结以及对Redis中常见面试 ...

  9. Python3 os.path() 模块

    os 模块提供了非常丰富的方法用来处理文件和目录.常用的方法如下表所示: 序       号 方法及描述 1 os.access(path, mode):检验权限模式 2 os.chdir(path) ...

  10. 统计字符的个数,能够组成几个acmicpc

    Problem F. String Input file:                  standard input Output file:               standard ou ...