vue路由在keep-alive下的刷新问题 对watch的影响
转载自:https://www.cnblogs.com/dansingal/p/8302100.html
问题描述:
在keep-alive中的在跳转到指定的路由时刷新对应的路由,其余不刷新。
1
2
3
4
5
|
<transition name= "fade" mode= "out-in" > <keep-alive> <router-view></router-view> </keep-alive> </transition> |
有几种解决方式:
1.在keep-alive中直接添加 include,cachedViews(Array类型:包含vue文件的组件name都将被缓存起来);反之exclude则是不包含;
注意:所有.vue组件文件都必须附上name属性!!!建议用vuex管理cachedViews
1
2
3
|
<keep-alive :include= "cachedViews" > <router-view></router-view> </keep-alive> |
2.监测$router的变化;
1
2
3
4
|
watch: { // 如果路由有变化,会再次执行该方法 "$route" : "fetchDate" } |
但是会在页面离开时再次执行fetchDate,并不是我们需要的,所以可以在to和from上添加执行逻辑,但也是十分的麻烦
1
2
3
4
5
6
7
8
|
//$router是只读状态,所以赋值操作会失效 watch: { $route (to, from) { if (list.indexOf(from.path) > -1){ //自行添加逻辑,list为你不想有缓存的路径 this .getData() } } } |
3.在添加keep-alive后会增加两个生命周期mounted>activated、离开时执行deactivated,路由的进入和切换回相应的触发activated和deactivated,这样就可以在每次入路由执行更细致的操作了
1
2
3
4
5
|
//如果是服务端渲染就算了 activated() { //只刷新数据,不改变整体的缓存 this .fetchDate(); } |
4.还有更简单粗暴的
1
2
3
4
5
6
|
//我就笑笑不说话<br><div> <keep-alive> <router-view v- if = "$route.meta.keepAlive" ></router-view> </keep-alive> <router-view v- if = "!$route.meta.keepAlive" ></router-view> </div> |
5.还有种情况,在不同路由应用了相同的vue组件
1
2
|
{path: 'aaa' ,component:Mompage,name: 'mom' }, {path: 'bbb' ,component:Mompage,name: 'momPlus' } |
默认情况下当这两个页面切换时并不会触发vue的created或者mounted钩子,需要手动的watch:$router(又回到上面的步骤),或者在router-view上加上唯一值。
1
2
3
4
5
6
7
|
//随便抄一段代码过来 <router-view :key= "key" ></router-view> computed: { key() { return this .$route.name !== undefined? this .$route.name + + new Date(): this .$route + + new Date() } } |
vue路由在keep-alive下的刷新问题 对watch的影响的更多相关文章
- 用vue写一个仿app下拉刷新的组件
如果你用vue弄移动端的页面,那么下拉刷新还是比较常见的场景,下面来研究如何写一个下拉刷新的组件(先上图); 由于节省大家的时间,样式就不贴出来了. html结构也不必介绍了,直接看代码吧-.- &l ...
- vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多
一.思路分析和效果图 用vue来实现一个瀑布流效果,加载网络图片,同时有下拉刷新和上拉加载更多功能效果.然后针对这几个效果的实现,捋下思路: 根据加载数据的顺序,依次追加标签展示效果: 选择哪种方式实 ...
- 实现移动端上拉加载和下拉刷新的vue插件(mescroll.js)
做一个简单的移动端展示项目,后台分页后前端加载,实现上拉加载下一页,找了下,还是用这个mescroll.js插件好一点 1.npm安装 npm install --save mescroll.js / ...
- VUE 路由参数改变重新刷新数据
VUE 路由参数改变重新刷新数据 App.vue 里面使用路由,然后通过App.vue文件中的搜索功能搜索刷新路由文件中的列表. 修改 index.js 文件 首先在路由文件 index.js 文件中 ...
- vue.js移动端app实战4:上拉加载以及下拉刷新
上拉加载以及下拉刷新都是移动端很常见的功能,在搜索或者一些分类列表页面常常会用到. 跟横向滚动一样,我们还是采用better-scroll这个库来实现.由于better已经更新了新的版本,之前是0.几 ...
- 详解vue移动端 下拉刷新
看完这篇文章,相信大伙也一样可以,做出一个自己的刷新,加载的组件 说这个功能之前,大家要先了解一下,要怎么触发滚动条事件. 一定要注意,所有滚动事件都必须要满足这个条件,横向滚动条也一样, 只要满足子 ...
- vue路由参数变化刷新数据
当路由到某个组件时,由于组件会复用,所以生命周期函数不会再次执行, 如果这个组件是模板组件,靠传入不同数据来显示的.那么,可能会发生参数变化了但页面数据却不变化. 问题 假如有个组件 info.vue ...
- vue-scroller实现vue单页面的上拉加载和下拉刷新问题
在vue中如何简单的实现页面的上拉加载和下拉刷新,在这里我推荐使用vue-scrolle插件. vue-scrolle的基本使用方法: 1.下载 npm i vue-scroller -D 2.导包 ...
- vue+better-scroll 下拉刷新,上拉加载更多
better-scroll 来做下拉刷新和 上拉加载 特别方便. 安装好vue脚手架和better-scroll 之后 直接复制粘贴就可以看到效果了 <template> <div ...
随机推荐
- Win10 OpenCV3.3.0+VS2013配置大坑,OpenCV解决方案编译报错“找不到python36_d.lib”错误
今天因为想要用OpenCV做图像识别,小白一个,在网上找到一个教程,但是需要配置OpenCV3.3.0的环境,于是又在网上找OpenCV3.3.0+VS2013(因为我之前已经安过了VS2013),前 ...
- 【转】草根老师的 linux字符设备驱动详解
Linux 驱动 之 模块化编程 Linux 驱动之模块参数和符号导出 Linux 设备驱动之字符设备(一) Linux 设备驱动之字符设备(二) Linux 设备驱动之字符设备(三)
- kubernetes管理机密信息
一.启动应用安全信息的保护: Secret介绍: 应用启动过程中可能需要一些敏感信息,比如访问数据库的用户名密码或者秘钥.将这些信息直接保存在容器镜像中显然不妥,Kubernetes 提供的解决方案是 ...
- 分析bug是前端还是后端的
如何分析一个bug是前端还是后端的? 平常提bug的时候,前端开发和后端开发总是扯皮,不承认是对方的bug 这种情况很容易判断,先抓包看请求报文,对着接口文档,看请求报文有没问题,有问题就是前端发的数 ...
- p2456二进制方程 题解
题面描述:可以跳过 一个形如: X1X2…Xn=Y1Y2..Ym 的等式称为二进制方程. 在二进制方程的两边:Xi和Yj (1<=i<=n:1<=j<=m)是二进制数字(0.1 ...
- JavaScript对象原型
一.MDN上的解释(有点抽象) 基于原型的语言? JavaScript 常被描述为一种基于原型的语言 (prototype-based language)——每个对象拥有一个原型对象,对象以其原型为模 ...
- JQuery 中each的使用方法
JQuery中的each函数在1.3.2的官方文档中的描述如下: each(callback) 以每一个匹配的元素作为上下文来执行一个函数. 意味着,每次执行传递进来的函数时,函数中的this关键字都 ...
- IIFE 立即执行函数表达式-模块化
1)立即执行 2)表达式 3)括号,分号结束 | 前缀运算符 | 表达式上下文 4)只需要执行一次,内部变量无需维护,可用于初始化 (function( ) { })( ); 或 (function( ...
- Hive中将文件加载到数据库表失败解决办法
Hive中将文件加载到数据库表失败解决办法(hive创建表失败) 遇到的问题: FAILED: Execution Error, return code 1 from org.apache.hadoo ...
- What is Double 11 in China? Is it a famous festival?
"1" means single, 11th, November is quadruple single!! What a tragedy for those single you ...