目录

• 1，熟悉keep-alive
• 2，在组件中使用keep-alive
• • 页面效果

1，熟悉keep-alive

用法
包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
和 相似， 是一个抽象组件，它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。
作用
keep-alive：保存组件的状态，对组件进行缓存。
参数

注意:：include/exclude匹配的值，是组件中的 name命名，而不是路由中的组件 name 命名。
钩子函数

被包含在 < keep-alive > 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated。

1. activated：在组件被激活时调用，在组件第一次渲染时也会被调用，之后每次keep-alive激活时被调用。
2. deactivated：在组件被停用时调用。

2，在组件中使用keep-alive

例子：有2个页面（列表页和详情页），每个页面都有一个输入框，先在列表页的输入框输入内容，点击跳转到详情页；再返回到列表页，输入框的内容需要存在。

1. 列表页

2. 详情页

3. 路由配置

export default [{path: '/vue/keep-alive',name: "/vue/keep-alive",component: resolve => require(['@/page/vue/keep-alive/list'], resolve),meta: {title: 'vue-keep-alive',keepAlive: true,},},{path: '/vue/keep-alive-details',name: "/vue/keep-alive-details",component: resolve => require(['@/page/vue/keep-alive/details'], resolve),meta: {title: 'vue-keep-alive-details'},},
]

4. App.vue

页面效果