4-9.keep-alive和router-view的结合使用

1.keep-alive的作用

keep-alive是vue的一个内置的组件，其作用是包裹动态的组件时，当组件不活跃时（就是不展示这个组件时）不再销毁该组件，而是缓存该组件。保留组件的状态避免再次活跃时重新加载。

2.效果展示

1.代码展示

App.vue页面

<template>
  <div id="nav">
    <button @click='jumpHome'>home</button>
    <button @click='jumpAbout'>about</button>
  </div>
  <router-view />
</template>

<script>
  export default {
    name: 'App',
    methods: {
      jumpHome() {
        this.$router.push({path:'/Home'});
      },
      jumpAbout() {
        this.$router.push({path:'About'});
      }
    }
  }
</script>
<style>
</style>

Home.vue

<template>
  <div class="">
   <h1>这是home页面</h1>
  </div>
</template>

<script>

export default {
  name: 'Home',
  created() {
    console.log("Home created");
  },
  unmounted() {
    console.log("Home destroyed");
  }
}
</script>

About.vue

<template>
  <div class="about">
    <h1>这是about页面</h1>
  </div>
</template>
<script>

  export default {
    name: 'About',
    created() {
      console.log("About created");
    },
    unmounted() {
      console.log("About destroyed");
    }
  }
</script>

2.过程分解

3.效果展示

4.添加keep-alive的代码

App.vue

<template>
  <div id="nav">
    <button @click='jumpHome'>home</button>
    <button @click='jumpAbout'>about</button>
  </div>
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </router-view>
</template>

<script>
  export default {
    name: 'App',
    methods: {
      jumpHome() {
        this.$router.push({path:'/Home'});
      },
      jumpAbout() {
        this.$router.push({path:'About'});
      }
    }
  }
</script>
<style>
</style>

5.添加keep-alive后效果展示

3.keep-alive的属性

当我们有条件打的缓存组件时，可以使用keep-alive来实现其功能，其有三个属性提供使用：

• include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
• exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
• max - 数字。最多可以缓存多少组件实例。

1.例子代码展示

<template>
  <div id="nav">
    <button @click='jumpHome'>home</button>
    <button @click='jumpAbout'>about</button>
  </div>
  <router-view v-slot="{ Component }">
    <keep-alive exclude='Home'>
      <component :is="Component" />
    </keep-alive>
  </router-view>
</template>

<script>
  export default {
    name: 'App',
    methods: {
      jumpHome() {
        this.$router.push({path:'/Home'});
      },
      jumpAbout() {
        this.$router.push({path:'About'});
      }
    }
  }
</script>
<style>
</style>

2.过程分解

3.结果展示

4.keep-alive的两个生命周期钩子函数

注意：使用的前提是有使用keep-alive

• activated：表示组件处于活跃时调用该方法
• deactivated:表示组件处于不活跃时调用该方法

1.代码展示

Home.vue

<template>
  <div class="">
   <h1>这是home页面</h1>
  </div>
</template>

<script>

export default {
  name: 'Home',
  activated() {
    console.log("Home activated");
  },
  deactivated() {
    console.log("Home deactivated");
  }
}
</script>

About.vue

<template>
  <div class="about">
    <h1>这是about页面</h1>
  </div>
</template>
<script>

  export default {
    name: 'About',
    activated() {
      console.log("About activated");
    },
    deactivated() {
      console.log("About deactivated");
    }
  }
</script>

2.效果展示

注意：只有能被keep-alive缓存的组件才会去执行这两个周期函数，不能被缓存的是不会去执行的，换句话说当使用它的exclude属性排除的组件时不会去执行的