记一次vue 的keep-alive踩坑之路 —— active和deactivated()函数不执行
现象:路由頁面被缓存,销毁阶段函数不执行,active和deactivated()函数不执行,进入页面的created函数(创建期函数)执行。原因:<template><div id="app"><keep-alive v-if="$route.meta.keepAlive"><div> //未激活...
·
现象:路由頁面被缓存,销毁阶段函数不执行,active和deactivated()函数不执行,进入页面的created函数(创建期函数)执行。
原因:
<template>
<div id="app">
<keep-alive v-if="$route.meta.keepAlive">
<div> //未激活
<router-view :class="this.$route.meta.requireAuth===true?'':'tab-bottom'"/>
</div>
</keep-alive>
<div>
<template>
改正:
<template>
<div id="app">
<keep-alive v-if="$route.meta.keepAlive">
<router-view :class="this.$route.meta.requireAuth===true?'':'tab-bottom'"/>
</keep-alive>
<div>
<template>
<keep-alive>
正常生效条件:
1.只能包裹动态组件,不能包裹div
等标签,要想保持状态,就得把那部分封装在一个功能性的组件上。
2.keep-alive仅支持第一个元素,单节点激活。
3.一个keep-alive只能在同一时间段内保持一个组件状态,也就是里面不能有两个动态组件
4.向上滑动后,切换页面再切换回来,要想页面在上一次滑动的地方,路由模式要是 history模式
vue 官网关于keep-alive
更多推荐
已为社区贡献16条内容
所有评论(0)