Vue keep-alive 缓存组件

目录

• 缓存路由组件

 

缓存路由组件

keep-alive标签包括，加上include或exclude属性即可

属性值必须和组件的name属性对应

App.vue

<template>
  <div id="app">
    <div class="nav">
      <router-link
        class="nav"
        :to="`/Island?id=${id}&title=${title}`"
        active-class="active-nav"
      >
        Island
      </router-link>
      <router-link class="nav" replace to="/Polaris" active-class="active-nav">
        Polaris
      </router-link>
    </div>
    <div class="con">
      <keep-alive include="Island">
        <router-view />
      </keep-alive>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data: () => ({ id: 123, title: "my title" }),
};
</script>

Island.vue

<template>
      <h1>
          message by Island 
      {{id}} 
      -
      {{title}}
      </h1>
</template>

<script>
export default {
  props:['id','title'],
  name:'Island',
  beforeDestroy(){
    console.log('Isalnd 即将被销毁');
  }
};
</script>

<style scoped>
h1 {
  color: salmon;
}
</style>