keep-alive(切换页面，保持状态)

绝地灬酷狼 2021-09-20 10:12 472阅读 0赞

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

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

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

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

来看个demo

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

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

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][vue_keep-alive]

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

个人微信公众号：

![20200824115406331.png][]

[vue_keep-alive]: https://cn.vuejs.org/v2/api/#keep-alive
[20200824115406331.png]: /images/20210812/6fe96936eee7413a94f0b76e0c5745cf.png