vue前端开发keepAlive使用详解

<keep-alive>
    <component />
</keep-alive>

/*将缓存 name 为 test 的组件*/
<keep-alive include='test'>
      <router-view/>
</keep-alive>

<keep-alive exclude="test"> 
  <router-view/>
</keep-alive>

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      redirect: 'goods',
      children: [
        {
          path: 'goods',
          name: 'goods',
          component: Goods,
          meta: {
        	keepAlive: false // 不需要缓存
      	  }
        },
        {
          path: 'ratings',
          name: 'ratings',
          component: Ratings,
          meta: {
        	keepAlive: true  // 需要缓存
      	  }
        }
      ]
    }
  ]
})

<template>
  <div id="app">
  	<keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

<template>
  <div class="wrapper">
    <ul class="content"></ul>
    <button class="add" id="add" @click="add">添加子元素</button>
  </div>
</template>
<script>
export default {
  name: 'keepCom1',
  methods: {
    add () {
      let ul = document.getElementsByClassName('content')[0]
      let li = document.createElement('li')
      li.innerHTML = '我是添加的元素'
      ul.appendChild(li)
    }
  },
  activated () {
    console.log('缓存activated执行')
  },
  deactivated () {
    console.log('缓存deactivated执行')
  }
}
</script>
<style>
</style>

<template>
  <div class="wrapper">
    <ul class="content"></ul>
    <button class="add" id="add" @click="add">添加子元素</button>
  </div>
</template>

<script>
export default {
  name: 'keepCom2',
  methods: {
    add () {
      let ul = document.getElementsByClassName('content')[0]
      let li = document.createElement('li')
      li.innerHTML = '我是添加的元素'
      ul.appendChild(li)
    }
  },
  activated () {
    console.log('缓存activated执行')
  },
  deactivated () {
    console.log('缓存deactivated执行')
  }
}
</script>
<style>
</style>

<template>
  <div align="center" style="margin-top: 20px;">
    <router-link to="/keepAvliveTest/keepcom1">使用缓存</router-link>
    <router-link to="/keepAvliveTest/keepcom2">不使用缓存</router-link>
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>
<script>
export default {
  name: 'keepAvliveTest'
}
</script>
<style>
</style>