Vue-Router中使用keep-alive及在transition中的动画过度问题

最新推荐文章于 2024-04-11 05:53:32 发布

Kyoku骏

最新推荐文章于 2024-04-11 05:53:32 发布

阅读量3k

点赞数

分类专栏：学习笔记文章标签： Vue Vue-Router

本文链接：https://blog.csdn.net/kyoku0604/article/details/102988190

版权

当我们使用Vue来回切换页面，并希望保持页面组件状态的时候，会用到Vue的keep-alive抽象组件。以下为官网中的说明:

<keep-alive>包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition>相似，<keep-alive>是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。

这里注意，必须包裹动态组件时，缓存机制才会生效

下面为简单的使用方式：

<keep-alive>
  <router-view :key="key"></router-view>
</keep-alive>

这里的key属性，我使用的是当前组件的完整路径。

computed:{
   
    key(){
   
      return this.$route.fullPath;
    }
  }

之后，每次切换路由，之前组件的状态在返回时会被保存起来。
当然，如果功能上只需保存指定组件状态，而不是所有组件状态，可以在keep-alive标签内加上include或exclude属性。
他们分别接受三种类型的值：

      <keep-alive include="account">
        <router-view :key="key"></router-view>
      </keep-alive>

关注