vue之页面缓存问题(基于2.0)

为什么会有这篇文章
在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)的更多相关文章
- vue相关文件说明(基于vue2.0)
1.config:生产,开发环境配置参数 2.static:第三方资源,这里面的文件直接写路径,不能用'import'导入 3.node_modules:引入一些依赖包 4..babelrc:定义了E ...
- vue多页面项目搭建(vue-cli 4.0)
1.创建vue项目 cmd命令执行 vue create app (app 自定义的项目名) 一般都会选择后者,自己配置一下自己需要的选项(空格为选中) 这是我个人需要的一些选项,路由Router.状 ...
- 基于vue2.0打造移动商城页面实践 vue实现商城购物车功能 基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
基于vue2.0打造移动商城页面实践 地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能 地址:http://www.jb51.net/art ...
- 关于vue里页面的缓存
keep-alive是vue内置的一个组件,可以使被它包含的组件处于保留状态,或避免被重新渲染. 用法: 运行结果描述: input输入框内,路由切换输入框内部的内容不会发生改变. 在keep-ali ...
- 部署基于.netcore5.0的ABP框架后台Api服务端,以及使用Nginx部署Vue+Element前端应用
前面介绍了很多关于ABP框架的后台Web API 服务端,以及基于Vue+Element前端应用,本篇针对两者的联合部署,以及对部署中遇到的问题进行处理.ABP框架的后端是基于.net core5.0 ...
- Vue 之keep-alive的使用,实现页面缓存
什么是keep-alive 有时候我们不希望组件被重新渲染影响使用体验: 或者处于性能考虑,避免多次重复渲染降低性能.而是希望组件可以缓存下来,维持当前的状态.这时候就需要用到keep-alive组件 ...
- vue中keep-alive,include的指定页面缓存问题
做vue项目时,有时要在某些页面做缓存,而其它页面不要.比如:A:首页,B:获取所有订单页面,C:订单详情页面:从A(首页)进入 B(获取所有订单)时应该不缓存,B(所有订单)进入 C(订单详情)订单 ...
- yii2.0缓存篇之页面缓存
页面缓存: 如果整个页面都不会发生改变,就可以使用页面缓存缓存整个页面. public function behaviors(){ //此方法[也叫行为]会提前控制器内其他方法执 ...
- 基于vue2.0的在线电影APP,
基于vue2.0构建的在线电影网[film],webpack + vue + vuex + vue-loader + keepAlive + muse-ui + cordova 全家桶,cordova ...
随机推荐
- CPU的物理数、核心数、线程数
最近了解下CPU的参数,主要是对常见的CPU参数指标:物理数.核心数以及线程数做了下了解.增长了点自己的见识,方便自己回忆和分享,记录下来.参考了网上的一些说明并加以整理,形成该随笔.主要参考链接如下 ...
- dedecms新增联动类别后的使用方法
近期用织梦的联动类别,后台明明可以直接新增联动类别,但是你直接调用是绝对调用不出来的............. 折腾了好几天终于全部解决,回忆下过程以便日后再遇到的时候参考. 第一步:先按照常规的在后 ...
- php使用正则表达式提取字符串中尖括号、小括号、中括号、大括号中的字符串
$str="你好<我>(爱)[北京]{天安门}"; echo f1($str); //返回你好 echo f2($str); //返回我 echo f3($str); ...
- ueditor的初始化赋值
ue.ready(function () {ue.setContent('初始内容'); //赋值给UEditor });
- 品Spring:对@Resource注解的处理方法
@Resource是Java的注解,表示一个资源,它具有双向的含义,一个是从外部获取一个资源,一个是向外部提供一个资源. 这其实就对应于Spring的注入和注册.当它用在字段和方法上时,表示前者.当它 ...
- Future类型的连锁的运用
Future类型的连锁的运用: 洗脸 刷牙 吃早饭 看电视 出门 串行: import scala.concurrent.{Await, Future} import scala.util.{Fail ...
- Linux下beego及beego相关插件安装
Linux下beego及beego相关插件安装 1.下载及配置go环境看见链接: http://golang.org/dl/ 网盘:链接: https://pan.baidu.com/s/1MveUM ...
- 【DP合集】背包 bound
N 种物品,第 i 种物品有 s i 个,单个重量为 w i ,单个价值为 v i .现有一个限重为 W 的背包,求能容 纳的物品的最大总价值. Input 输入第一行二个整数 N , W ( N ≤ ...
- 一次SSM项目记录
1.控制台输入 mvn archetype:generate -DgroupId=com.yjdev -DartifactId=myzone -DarchetypeArtifactId=maven-a ...
- surging 微服务引擎 -协议主机的Behavior特性
1.前言 因为工作的关系,最近很少更新surging,因为surging 一直处在不温不火的状态,而自己每天利用业余时间进行完善,每天都是疲惫的状态,还要应付新手的提问,曾经一度想放弃,但是有些人劝说 ...