keep-alive缓存多级菜单相关

Holly1945

于 2021-11-18 19:20:24 发布

阅读量521

点赞数

分类专栏： vue 文章标签：前端 vue

本文链接：https://blog.youkuaiyun.com/Holly1945/article/details/121407158

版权

在实现多级菜单的Vue应用中，使用keep-alive组件进行状态缓存时遇到问题：InfoManage页面及其子菜单（新增、编辑、详情）都需要缓存。当尝试单独缓存InfoManageList页面无效，原因是父级InfoManage未被缓存。解决办法包括将InfoManage的子路由提升到与InfoManage同一级，维护侧菜单和面包屑的正确渲染，以及利用activated生命周期钩子处理页面刷新。此外，可以考虑将子页面渲染为一个组件来保持刷新状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

keep-alive

场景：多级菜单

二级菜单
信息管理 -> 包含列表、新增、编辑、详情 子页面

需求：
列表页的搜索条件、分页、滚动条位置等状态需要缓存

方法：使用vue自带keep-alive 组件

<template>
  <section class="app-main">
    <transition name="fade-transform" mode="out-in">
      <keep-alive :include="cacheViews">
        <router-view :key="key" />
      </keep-alive>
    </transition>
  </section>
</template>

<script>
export default {
   
  name: 'AppMain',
  computed: {
   
    key() {
   
      return this.$route.path

最低0.47元/天解锁文章