接觸過(guò)電商網(wǎng)站，大家可能對(duì)類似京東的一些方面比較有印象，比如我正在商品列表瀏覽商品，瀏覽了很長(zhǎng)一段的商品，然后點(diǎn)擊切換到其他頁(yè)面了，再次點(diǎn)擊回到商品列表頁(yè)面，還在之前瀏覽的地方，類似這種功能是怎么實(shí)現(xiàn)的呢？

這次就說(shuō)說(shuō)在vue中的簡(jiǎn)單實(shí)現(xiàn)。

vue官網(wǎng)提供了keep-alive的方法（也算是內(nèi)部封裝好的組件吧）

官網(wǎng)介紹中提到，keep-alive只能包裹在封裝的組件中，而不能直接包裹在類似div、h1等原生標(biāo)簽上，那么我們要想保持狀態(tài)，就得把那部分封裝在一個(gè)功能性的組件上。

來(lái)看個(gè)demo

1、這邊把路由分為幾個(gè)部分，實(shí)現(xiàn)同一個(gè)路由的不同模塊的切換效果。好吧，這不是重點(diǎn)。

這里使用keep-alive包裹插槽（router-view），那么在這個(gè)路由模塊渲染的代碼就會(huì)保持之前的狀態(tài)

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

2、組件內(nèi)容部分（這里刪除了一些邏輯代碼，大家關(guān)注重點(diǎn)即可）

內(nèi)部組件是一個(gè)視頻，設(shè)置為系統(tǒng)剛加載時(shí)的首屏動(dòng)畫顯示，點(diǎn)擊導(dǎo)航切換路由后暫停該視頻，避免資源重復(fù)加載，再通過(guò)標(biāo)題切換回首頁(yè)時(shí)繼續(xù)播放視頻。

這里有2個(gè)方法：activated()和deactivated()

第一個(gè)方法activated是在該路由渲染時(shí)調(diào)用的方法，當(dāng)我們切換到其他路由時(shí)會(huì)調(diào)用deactivated方法，這里mounted等方法只會(huì)調(diào)用一次，銷毀方法不會(huì)調(diào)用，因?yàn)樗鼤?huì)保持該路由的狀態(tài)一直維持，而不進(jìn)行銷毀。

<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、路由配置

這里通過(guò)給該路由設(shè)置keepAlive為true保持該路由的狀態(tài)

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

這樣就可以實(shí)現(xiàn)保持狀態(tài)的效果了。

大家也可以看看官網(wǎng)的具體介紹。

地址：vue官網(wǎng)keep-alive

如有問(wèn)題，請(qǐng)指出，接受批評(píng)。