现象:路由頁面被缓存,销毁阶段函数不执行,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
Logo

前往低代码交流专区

更多推荐