Vue路由组件的缓存keep

路由组件的缓存keep"/>

Vue路由组件的缓存keep

Vue路由组件的缓存keep-alive和include属性

• 功能：浏览器页面在进行切换时，原有的路由组件会被销毁。通过缓存可以保存被切换的路由组件。
  • 例子：在页面上填好的信息当进行页面切换再转回原来的页面时，原本信息被清空了需要重新填写

keep-alive和include属性的搭配使用

• 功能：切换路由时，保留被切换路由组件。
• 格式：
  • <keep-alive> <router-view/> <keep-alive>
    • 功能：保存所有路由组件
  • <keep-alive include="组件名称"> <router-view/> <keep-alive>
    • 功能：保存include指定的组件，数组形式可保存多个

<template><div><div><ul><li><router-link to="/A">A1 Router-Link</router-link></li><li><router-link to="/B">B1 Router-Link</router-link></li></ul></div>// 保存所有路由组件<keep-alive><router-view></router-view></keep-alive>// 保存include指定的组件，可保存多个<keep-alive :include="['A', 'B']"><router-view></router-view></keep-alive></div>
</template><script>export default {name : 'App'}
</script>