Vue keepAlive实现不同的路由共用一个组件component的缓存问题(推荐)

Xylona ·

更新时间:2024-11-13

· 797 次阅读

不同的路由共用一个组件component，并用keepAlive实现不同的页面缓存

实现功能：使用列表页面检索的数据跳转到对应的详情页面，从详情页回到列表页能记住上次检索的数据，再次切换到详情页时能正常取到对应的数据

实现方式使用Vue keepAlive实现页面缓存，整理了一些资料和其他的博客在这里记录一下。。。。

keepAlive原理：

1，保留组件的状态，在重新进入页面时避免重新渲染。
2、是抽象组件，它自身不会渲染DOM元素，也不会出现在父组件链中。
3、当组件在内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

实现

在app.vue中改写router-view

<keep-alive :include="cachedViews" :exclude="disCachedViews">
    <router-view/>
  </keep-alive>

注意 cachedViews里面存的是由路由name构成的数组，数组的name需与组件的name一致，否词不能达到缓存的效果。
因为这里用的是动态路由，组件的name不能根据路由动态更改，所以用另外一种方式

<keep-alive>
      <router-view v-if="$route.meta.keepAlive" >
        <!-- 这里是会被缓存的视图组件 -->
      </router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive" >
      <!-- 这里是不被缓存的视图组件 -->
    </router-view>

在构建路由时路由元信息meta加上属性keepAlive，为true

这里已经实现了页面缓存的效果，及第一个功能检索的列表页面list.vue进入到详情i页nfo.vue，再切换回到list.vue可以看到已检索的数据列表。

2.打开一个新的详情页，发现数据是上一次打开的页面数据，数据并没有根据路由刷新

因为我们这里做了keepAlive缓存，重新进入页面并不会触发created方法，而且详情页info.vue做了多路由复用同一个组件的情况，不能使用activated（）去触发。
解决这个问题必须解决路由复用问题，使用Vue-router做项目时，会遇到如/info/:id这样只改变id号的场景。由于router-view是复用的，单纯的改变id号并不会刷新router-view

1.方法一：通过 watch 监听路由

watch: {
     '$route'(to, from) {
        if (to.path !== from.path) {
          console.log('检测到路由变化')
          // 初始化数据
          this.initData()
        }
      }
    },

2.方法二：用 :key 来阻止“复用”

设置key为$route.fullPath之后，由于两个路由的fullPath不同，组件会被强制不复用

<keep-alive>
      <router-view v-if="$route.meta.keepAlive" :key="$route.fullPath">
        <!-- 这里是会被缓存的视图组件 -->
      </router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive" :key="$route.fullPath">
      <!-- 这里是不被缓存的视图组件 -->
    </router-view>

3.方法三：通过 vue-router 的钩子函数 beforeRouteEnter beforeRouteUpdate beforeRouteLeave

beforeRouteEnter (to, from, next) {
 // 在渲染该组件的对应路由被 confirm 前调用
 // 不！能！获取组件实例 `this`
 // 因为当钩子执行前，组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
 // 在当前路由改变，但是该组件被复用时调用
 // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
 // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
 // 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
 // 导航离开该组件的对应路由时调用
 // 可以访问组件实例 `this`
}

经过实践，方法二是比较好用的

到此这篇关于Vue keepAlive实现不同的路由共用一个组件component的缓存问题的文章就介绍到这了,更多相关Vue keepAlive组件缓存内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！

VUE 路由 keepalive 缓存

1024 个赞