亲宝软件园·资讯

展开

Vue keepAlive组件缓存

代码修整工 人气:0

不同的路由共用一个组件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`

}

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

加载全部内容

相关教程
猜你喜欢
用户评论