美文网首页
vue的keep-active组件实现页面缓存

vue的keep-active组件实现页面缓存

作者: 小番茄1009 | 来源:发表于2020-04-15 21:53 被阅读0次

    1 在路由的配置项mate对象里配置keepActive属性为true

    2 在路由出口处用keep-active组件包裹需要缓存的组件 具体如下

    <keep-alive>

        <router-view v-if="$route.meta.keepAlive"></router-view>

    </keep-alive>

    <router-view v-if="!$route.meta.keepAlive"></router-view>

    3keep-alive生命周期钩子函数:activated、deactivated

    使用<keep-alive>会将数据保留在内存中,如果要在每次进入页面的时候获取最新的数据,需要在activated阶段获取数据,承担原来created钩子中获取数据的任务。

    相关文章

      网友评论

          本文标题:vue的keep-active组件实现页面缓存

          本文链接:https://www.haomeiwen.com/subject/gjxkvhtx.html