记一次vue 的keep-alive踩坑之路 —— active和deactivated()函数不执行

馋奶兔 提交于 2019-12-11 16:21:11

现象:路由頁面被缓存,销毁阶段函数不执行,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
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!