vue中keep-alive失效问题

最新推荐文章于 2024-05-29 09:57:39 发布
最新推荐文章于 2024-05-29 09:57:39 发布
阅读量1.7k 收藏 2
点赞数 1
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62418079/article/details/130099419
版权

vue中keep-alive失效问题

一、确保router下index.js 路由配置中name与组件界面name是否一致。

二、layout文件下查看

1.layout下AppMain.vue（给router-view标签添加）
<template>
  <section class="app-main" style="min-height: 100%">
    <transition name="fade" mode="out-in">
      <keep-alive :include="cachedViews">
        <router-view></router-view>
      </keep-alive>
    </transition>
  </section>
</template>

<script>
export default {
  name: 'AppMain',
  computed: {
    cachedViews() {
      return this.$store.state.tagsView.cachedViews
    }
  
  }
}
</script>
2.确保layout文件下有TagsView.vue
<template>
  <div class="tags-view-container">
    <scroll-pane class='tags-view-wrapper' ref='scrollPane'>
      <router-link ref='tag' class="tags-view-item" :class="isActive(tag)?'active':''" v-for="tag in Array.from(visitedViews)"
        :to="tag.path" :key="tag.path" @contextmenu.prevent.native="openMenu(tag,$event)">
        {{tag.title}}
        <span class='el-icon-close' @click.prevent.stop='closeSelectedTag(tag)'></span>
      </router-link>
    </scroll-pane>
    <ul class='contextmenu' v-show="visible" :style="{left:left+'px',top:top+'px'}">
      <li @click="closeSelectedTag(selectedTag)">关闭</li>
      <li @click="closeOthersTags">关闭其他</li>
      <li @click="closeAllTags">关闭所有</li>
    </ul>
  </div>
</template>

<script>
import ScrollPane from '@/components/ScrollPane'

export default {
  components: { ScrollPane },
  data() {
    return {
      visible: false,
      top: 0,
      left: 0,
      selectedTag: {}
    }
  },
  computed: {
    visitedViews() {
      return this.$store.state.tagsView.visitedViews
    }
  },
  watch: {
    $route() {
      this.addViewTags()
      this.moveToCurrentTag()
    },
    visible(value) {
      if (value) {
        document.body.addEventListener('click', this.closeMenu)
      } else {
        document.body.removeEventListener('click', this.closeMenu)
      }
    }
  },
  mounted() {
    this.addViewTags()
  },
  methods: {
    generateRoute() {
      if (this.$route.name) {
        return this.$route
      }
      return false
    },
    isActive(route) {
      return route.path === this.$route.path || route.name === this.$route.name
    },
    addViewTags() {
      const route = this.generateRoute()
      if (!route) {
        return false
      }
      if(route.meta.hiddenTag){
        return false
      }
      this.$store.dispatch('addVisitedViews', route)
    },
    moveToCurrentTag() {
      const tags = this.$refs.tag;
      if(!tags) return;
      this.$nextTick(() => {
        for (const tag of tags) {
          if (tag.to === this.$route.path) {
            this.$refs.scrollPane.moveToTarget(tag.$el)
            break
          }
        }
      })

    },
    closeSelectedTag(view) {
      this.$store.dispatch('delVisitedViews', view).then((views) => {
        if (this.isActive(view)) {
          const latestView = views.slice(-1)[0]
          if (latestView) {
            this.$router.push(latestView.path)
          } else {
            this.$router.push('/')
          }
        }
      })
    },
    closeOthersTags() {
      this.$router.push(this.selectedTag.path)
      this.$store.dispatch('delOthersViews', this.selectedTag).then(() => {
        this.moveToCurrentTag()
      })
    },
    closeAllTags() {
      this.$store.dispatch('delAllViews')
      this.$router.push('/')
    },
    openMenu(tag, e) {
      this.visible = true
      this.selectedTag = tag
      this.left = e.clientX
      this.top = e.clientY
    },
    closeMenu() {
      this.visible = false
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.tags-view-container {
  .tags-view-wrapper {
    background: #fff;
    height: 34px;
    border-bottom: 1px solid #d8dce5;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
    .tags-view-item {
      display: inline-block;
      position: relative;
      height: 26px;
      line-height: 26px;
      border: 1px solid #d8dce5;
      color: #495060;
      background: #fff;
      padding: 0 8px;
      font-size: 12px;
      margin-left: 5px;
      margin-top: 4px;
      &:first-of-type {
        margin-left: 15px;
      }
      &.active {
        background-color: #3b200c;
        border-color: #3b200c;
        color: #fff;
        &::before {
          content: '';
          background: #fff;
          display: inline-block;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          position: relative;
          margin-right: 2px;
        }
      }
    }
  }
  .contextmenu {
    margin: 0;
    background: #fff;
    z-index: 100;
    position: absolute;
    list-style-type: none;
    padding: 5px 0;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
    color: #333;
    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
    li {
      margin: 0;
      padding: 7px 16px;
      cursor: pointer;
      &:hover {
        background: #eee;
      }
    }
  }
}
</style>

<style rel="stylesheet/scss" lang="scss">
//reset element css of el-icon-close
.tags-view-wrapper {
  .tags-view-item {
    .el-icon-close {
      width: 16px;
      height: 16px;
      vertical-align: 2px;
      border-radius: 50%;
      text-align: center;
      transition: all .3s cubic-bezier(.645, .045, .355, 1);
      transform-origin: 100% 50%;
      &:before {
        transform: scale(.6);
        display: inline-block;
        vertical-align: -3px;
      }
      &:hover {
        background-color: #b4bccc;
        color: #fff;
      }
    }
  }
}
</style>
3.在TagsView.vue中引用ScrollPane组件
<template>
  <div class="scroll-container" ref="scrollContainer" @wheel.prevent="handleScroll">
    <div class="scroll-wrapper" ref="scrollWrapper" :style="{left: left + 'px'}">
      <slot></slot>
    </div>
  </div>
</template>

<script>
const padding = 15 // tag's padding

export default {
  name: 'scrollPane',
  data() {
    return {
      left: 0
    }
  },
  methods: {
    handleScroll(e) {
      const eventDelta = e.wheelDelta || -e.deltaY * 3
      const $container = this.$refs.scrollContainer
      const $containerWidth = $container.offsetWidth
      const $wrapper = this.$refs.scrollWrapper
      const $wrapperWidth = $wrapper.offsetWidth

      if (eventDelta > 0) {
        this.left = Math.min(0, this.left + eventDelta)
      } else {
        if ($containerWidth - padding < $wrapperWidth) {
          if (this.left < -($wrapperWidth - $containerWidth + padding)) {
            this.left = this.left
          } else {
            this.left = Math.max(this.left + eventDelta, $containerWidth - $wrapperWidth - padding)
          }
        } else {
          this.left = 0
        }
      }
    },
    moveToTarget($target) {
      const $container = this.$refs.scrollContainer
      const $containerWidth = $container.offsetWidth
      const $targetLeft = $target.offsetLeft
      const $targetWidth = $target.offsetWidth

      if ($targetLeft < -this.left) {
        // tag in the left
        this.left = -$targetLeft + padding
      } else if ($targetLeft + padding > -this.left && $targetLeft + $targetWidth < -this.left + $containerWidth - padding) {
        // tag in the current view
        // eslint-disable-line
      } else {
        // tag in the right
        this.left = -($targetLeft - ($containerWidth - $targetWidth) + padding)
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.scroll-container {
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  width: 100%;
  .scroll-wrapper {
    position: absolute;
  }
}
</style>
4.查看layout文件下components中index.js是否存在TagsView打包
export { default as Navbar } from './Navbar'
export { default as Sidebar } from './Sidebar'
export { default as TagsView } from './TagsView'
export { default as AppMain } from './AppMain'
5.查看layout下index.vue中是否import TagsView组件并使用组件
<template>
  <div :class="classObj" class="app-wrapper">
    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
    <sidebar class="sidebar-container" />
    <div class="main-container">
      <div :class="{'fixed-header':fixedHeader}">
        <navbar />
      </div>
      <tags-view></tags-view>
      <app-main />
    </div>
  </div>
</template>

<script>
import { AppMain, Navbar, Sidebar, TagsView } from './components'
import ResizeMixin from './mixin/ResizeHandler'

export default {
  name: 'Layout',
  components: {
    Navbar,
    Sidebar,
    AppMain,
    TagsView
  },
  mixins: [ResizeMixin],
  computed: {
    sidebar() {
      return this.$store.state.app.sidebar
    },
    device() {
      return this.$store.state.app.device
    },
    fixedHeader() {
      return this.$store.state.settings.fixedHeader
    },
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
        mobile: this.device === 'mobile'
      }
    }
  },
  methods: {
    handleClickOutside() {
      this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "~@/styles/mixin.scss";
  @import "~@/styles/variables.scss";

  .app-wrapper {
    @include clearfix;
    position: relative;
    height: 100%;
    width: 100%;
    &.mobile.openSidebar{
      position: fixed;
      top: 0;
    }
  }
  .drawer-bg {
    background: #000;
    opacity: 0.3;
    width: 100%;
    top: 0;
    height: 100%;
    position: absolute;
    z-index: 999;
  }

  .fixed-header {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9;
    width: calc(100% - #{$sideBarWidth});
    transition: width 0.28s;
  }

  .hideSidebar .fixed-header {
    width: calc(100% - 54px)
  }

  .mobile .fixed-header {
    width: 100%;
  }
</style>

三、store文件下modules是否存在tagsView.js并且在store下index.j和getters.js中引用

1.(tagsView.js文件)
const tagsView = {
  state: {
    visitedViews: [],
    cachedViews: []
  },
  mutations: {
    ADD_VISITED_VIEWS: (state, view) => {
      if (state.visitedViews.some(v => v.path === view.path)) return
      state.visitedViews.push({
        name: view.name,
        path: view.path,
        title: view.meta.title || 'no-name'
      })
      if (!view.meta.noCache) {
        state.cachedViews.push(view.name)
      }
    },
    DEL_VISITED_VIEWS: (state, view) => {
      for (const [i, v] of state.visitedViews.entries()) {
        if (v.path === view.path) {
          state.visitedViews.splice(i, 1)
          break
        }
      }
      for (const i of state.cachedViews) {
        if (i === view.name) {
          const index = state.cachedViews.indexOf(i)
          state.cachedViews.splice(index, 1)
          break
        }
      }
    },
    DEL_OTHERS_VIEWS: (state, view) => {
      for (const [i, v] of state.visitedViews.entries()) {
        if (v.path === view.path) {
          state.visitedViews = state.visitedViews.slice(i, i + 1)
          break
        }
      }
      for (const i of state.cachedViews) {
        if (i === view.name) {
          const index = state.cachedViews.indexOf(i)
          state.cachedViews = state.cachedViews.slice(index, i + 1)
          break
        }
      }
    },
    DEL_ALL_VIEWS: (state) => {
      state.visitedViews = []
      state.cachedViews = []
    }
  },
  actions: {
    addVisitedViews({ commit }, view) {
      commit('ADD_VISITED_VIEWS', view)
    },
    delVisitedViews({ commit, state }, view) {
      return new Promise((resolve) => {
        commit('DEL_VISITED_VIEWS', view)
        resolve([...state.visitedViews])
      })
    },
    delOthersViews({ commit, state }, view) {
      return new Promise((resolve) => {
        commit('DEL_OTHERS_VIEWS', view)
        resolve([...state.visitedViews])
      })
    },
    delAllViews({ commit, state }) {
      return new Promise((resolve) => {
        commit('DEL_ALL_VIEWS')
        resolve([...state.visitedViews])
      })
    }
  }
}

export default tagsView
2.store下index.js
import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app'
import errorLog from './modules/errorLog'
import permission from './modules/permission'
import tagsView from './modules/tagsView'
import user from './modules/user'
import getters from './getters'
import settings from '@/settings'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    app,
    errorLog,
    permission,
    tagsView,
    user,
    settings
  },
  getters
})

export default store
3.store下getters.js
const getters = {
  sidebar: state => state.app.sidebar,
  language: state => state.app.language,
  device: state => state.app.device,
  visitedViews: state => state.tagsView.visitedViews,
  cachedViews: state => state.tagsView.cachedViews,
  token: state => state.user.token,
  avatar: state => state.user.avatar,
  name: state => state.user.name,
  nick: state => state.user.nick,
  introduction: state => state.user.introduction,
  status: state => state.user.status,
  roles: state => state.user.roles,
  perms: state => state.user.perms,
  visitor: state => state.user.visitor,
  setting: state => state.user.setting,
  examtype: state => state.user.examtype,
  departmentId: state => state.user.departmentId,
  departmentName: state => state.user.departmentName,
  permission_routers: state => state.permission.routers,
  addRouters: state => state.permission.addRouters,
  errorLogs: state => state.errorLog.logs,
  uid: state => state.user.uid
}
export default getters
普兰加深红。
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
记一次keep-alive没有生效的排查
aylog的博客
12-16 1117
记一次keep-alive没有生效的排查，解决keep-alive没有生效问题，为后来者踩坑。
keep-alive不能缓存多层级路由菜单问题解决
11-21
这出现的原因是多级路由导致的，就是router-view嵌套 在层级不同的router-view中切换tag会出现缓存数据失效的问题。目前keep-alive可以有效缓存一级，二级的路由菜单，3级以上菜单并不能做到缓存，这里提供一个解决方案： 在cachedViews中手动加上一级菜单和三级菜单之间，缺失的二级菜单的名字，这样二级菜单下的组件就会缓存了 实列代码如下： const _import = require('@/router/_import_prodection');//获取组件的方法 import {tree} from '@/utils/treeDate' import
vue使用keep-alive不生效解决方案
最新发布
qq_26311665的博客
05-29 494
vue使用keep-alive不生效解决方案
设置了keep-alive但缓存不生效的问题!!!
weixin_47076912的博客
05-14 818
设置了keep-alive但缓存不生效的问题!!!
Vue el-tabs使用 keep-alive 不生效
努力搬砖的小码
04-25 348
Vue el-tabs使用 keep-alive 不生效
vue3 中使用 keep-alive 不生效的原因，及keep-alive使用详细介绍
热门推荐
前端打工人的博客
07-25 1万+
keep-alive是vue提供的一个组件，它可以将组件缓存起来，避免在组件切换时，每次都重新渲染，从而提高页面性能和用户体验。因此，keepalive被广泛应用于一些需要频繁切换路由或组件的应用中。keep-alive是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。
vue中使用keep-alive失效
qq_42282987的博客
11-07 860
原本是想一起缓存的，但这里div包裹后缓存失效，删除div，将NavHome组件移到外层，如下。keep-alive中包含的是div而不是组件时，keep-alive会失效，如下。keep-alive的缓存效果恢复了。
vue2 keep-alive不生效原因
m0_53282432的博客
04-08 461
2.在其他页路由入口处重复使用keep-alive，可能出现覆盖情况。解决方法：设置name需与router内name保持一致。解决办法：全局搜索查看是否有可能冲突的地方，并解决。应用场景：列表页进入详情页返回，使列表页不刷新。1.view内页面设置未name。
vue解决使用webpack打包后keep-alive不生效的方法
10-18
今天小编就为大家分享一篇vue解决使用webpack打包后keep-alive不生效的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue keep-alive 数据更新的问题
12-01
总结来说，解决Vue中`<keep-alive>`数据更新的问题关键在于理解其生命周期变化，并适当地调整数据获取和初始化的时机。将数据获取逻辑从`mounted`移动到`activated`，可以确保组件在每次激活时都能获取到最新的数据...
解决vue单页使用keep-alive页面返回不刷新的问题
12-29
<keep>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。 首先在App.vue页面上有下面一段代码，我们都知道这是页面渲染的地方 <router></router> 把这段代码改成如下： <keep> ...
详解vue-template-admin三级路由无法缓存的解决方案
11-21
这个问题主要涉及Vue Router的`keep-alive`特性，以及如何处理组件的缓存策略。 `keep-alive` 是Vue Router提供的一种组件缓存机制，它允许我们保留组件的状态，即使组件在视图中被切换出去。通常，`keep-alive`会...
alive的不生效 keep vue_vue keep-alive 不生效和多级（三级以上）缓存失败
weixin_42113552的博客
01-14 974
vue keep-alivekeep-alive 不生效的可能原因如果安装官方的写法，已经正常完成keep-alive一级二级路由请检查需要router 界面当前引入组件是否有name 属性, 下面Demo 的 Menu1path: 'menu1',component: () => import('@/views/demos/nested/menu1/index'), // Parent r...
vue三级以上菜单keep-alive无效解决办法
ll7425的博客
11-15 2474
所以解决办法将每个子组件都会存在加载缓存它的父组件，将Layout的name设置为唯一值、common也是如此。每个子组件与父组件都会公用Layout、Common,
vue中使用keepalive缓存页面三个页面之间跳转第一次不生效
FangFang's Blog
01-18 2276
经排查发现，是因为我跳转的路由中有中文，keepalive第一次缓存的是正常的带中文的路由，当返回的时候中文变成了乱码，keepalive中没有缓存这个乱码的路由，所以第一次返回的时候页面缓存没生效，第二次正常中文和中文乱码路由都被缓存了，这个时候页面缓存就正常了。里打印会发现，缓存的页面多了一个乱码的，这其实就是原来的B页面，就是因为这个页面B，中文和中文乱码的才被缓存下来，所以第二次再返回的时候B页面才不会再进入到created生命周期。生命周期，也就是B页面没被缓存，// 注意这里路由后面的中文。
vue3 路由多层嵌套 keepalive 不生效
偷喝汽水的博客
06-11 3899
vue3 路由多层嵌套 keepalive 不生效
vue3 keep-alive 失效
10-25
当使用Vue3中的keep-alive时，可能会出现失效的情况。这可能是由于以下原因导致的： 1. keep-alive只能包含一个直接子组件，如果有多个子组件，则只有第一个子组件会被缓存。 2. 如果缓存的组件中有异步操作，可能会导致缓存失效。 3. 如果缓存的组件中有使用了activated和deactivated生命周期钩子函数，这些钩子函数可能会影响缓存的状态。 为了解决这些问题，可以尝试以下方法： 1. 确保keep-alive只包含一个直接子组件。 2. 在缓存的组件中避免使用异步操作。 3. 避免在缓存的组件中使用activated和deactivated生命周期钩子函数。 如果以上方法都无法解决问题，可以尝试使用Vue3提供的新特性suspense来代替keep-alive。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值