接触过电商网站，大家可能对类似京东的一些方面比较有印象，比如我正在商品列表浏览商品，浏览了很长一段的商品，然后点击切换到其他页面了，再次点击回到商品列表页面，还在之前浏览的地方，类似这种功能是怎么实现的呢？

这次就说说在vue中的简单实现。

vue官网提供了keep-alive的方法（也算是内部封装好的组件吧）

官网介绍中提到，keep-alive只能包裹在封装的组件中，而不能直接包裹在类似div、h1等原生标签上，那么我们要想保持状态，就得把那部分封装在一个功能性的组件上。

来看个demo

1、这边把路由分为几个部分，实现同一个路由的不同模块的切换效果。好吧，这不是重点。

这里使用keep-alive包裹插槽（router-view），那么在这个路由模块渲染的代码就会保持之前的状态

<div id="routerCenterDiv">
    <transition name="slide-fade" mode="out-in">
        <keep-alive>
          <router-view name="routerCenter"/>
        </keep-alive>
    </transition>
</div>

2、组件内容部分（这里删除了一些逻辑代码，大家关注重点即可）

内部组件是一个视频，设置为系统刚加载时的首屏动画显示，点击导航切换路由后暂停该视频，避免资源重复加载，再通过标题切换回首页时继续播放视频。

这里有2个方法：activated()和deactivated()

第一个方法activated是在该路由渲染时调用的方法，当我们切换到其他路由时会调用deactivated方法，这里mounted等方法只会调用一次，销毁方法不会调用，因为它会保持该路由的状态一直维持，而不进行销毁。

<template>
  <div id="home">
    <video
      ref="MaskVideo"
      autoplay
      muted
      poster="../static/img/index/111.png"
      style="object-fit:fill"
      width="1920px"
      height="1080px"
    ></video>
  </div>
</template>

<script>
export default {
  name: "home",
  components: {},
  data() {
    return {
      
    };
  },
  activated() {
    if (this.$refs.MaskVideo.src) this.$refs.MaskVideo.play();
  },
  deactivated() {
    if (this.$refs.MaskVideo.src) this.$refs.MaskVideo.pause();
  }
};
</script>

3、路由配置

这里通过给该路由设置keepAlive为true保持该路由的状态

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'Home',
      components: {
        routerCenter: Home,
      },
      meta: {
        keepAlive: true // 需要被缓存
      }
    },
  ],
});

这样就可以实现保持状态的效果了。

大家也可以看看官网的具体介绍。

地址：vue官网keep-alive

如有问题，请指出，接受批评。

个人微信公众号：