keep-alive是vue内置的一个组件，实现缓存

清疚 2023-05-29 03:37 3阅读 0赞

**keep-alive是vue内置的一个组件，可以使被它包含的组件处于保留状态，或避免被重新渲染。**

**在keep-alive标签内部添加 **

**include：字符串或正则表达式。只有匹配的组件会被缓存**

**exclude： 字符串或正则表达式。任何匹配的组件都不会被缓存。**

hello组件：

com1组件：

<template>
      <div class="hello">
        <button @click="BtnClick">Btn</button>
       <input type="text">
        <div>{
       {message}}</div>
      </div>
    </template>
    <script>
    export default {
      name: "Com1",
      data() {
        return {
          message:'messageCom1'
        };
      },
      mounted() {
      },
      methods: {
        BtnClick(){
          this.message=="messageCom1-1"? this.message="messageCom1": this.message="messageCom1-1"
        }
      }
    };
    </script>
    <style scoped>
    </style>

com2组件：

<template>
      <div class="hello">
        <button @click="BtnClick">Btn2</button>
       <input type="text">
        <div>{
       {message}}</div>
      </div>
    </template>
    <script>
    export default {
      name: "aaa",
      data() {
        return {
          message:'messageCom2'
        };
      },
      mounted() {
      },
      methods: {
        BtnClick(){
          this.message=="messageCom2-2"? this.message="messageCom2": this.message="messageCom2-2"
        }
      }
    };
    </script>
    <style scoped>
    </style>

**结合router缓存部分页面：**

import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    import HelloWorld1 from '@/components/HelloWorld1'
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld,
          meta:{
            keepAlive:true//需要被缓存
          }
        },
        {
          path: '/index',
          name: 'HelloWorld1',
          component: HelloWorld1,
          meta:{
            keepAlive:false//不需要被缓存
          }
        },
      ]
    })

<template>
      <div id="app">
        <img src="./assets/logo.png" />
        <button @click="tabC">tabC切换路由</button>
        <keep-alive>
          <router-view v-if="$route.meta.keepAlive" />
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"/>
      </div>
    </template>
    
    <script>
    export default {
      name: "App",
      data(){
        return{
          msg:'HelloWorld'
    
        }
    
      },
      methods:{
        tabC(){
          this.$router.push({
            name:this.msg=="HelloWorld"?this.msg="HelloWorld1":this.msg='HelloWorld'
          })
        }
      }
    };
    </script>
    
    <style>
    #app {
      font-family: "Avenir", Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>