keep-alive对路由进行缓存以及使用方法和场景

路由缓存

正常路由占位符

Router-view

对组件进行缓存和不缓存的操作

<div>
	<!-- 缓存显示的组件 -->
	<keep-alive v-if="$route.meta.isAlive">
 		<router-view/>
	</keep-alive>

	<!-- 不缓存组件 -->
	<router-view v-if="!$route.meta.isAlive">
	</router-view>  
</div>

在router中的index配置

const routes = [

  {
​    path: '/',
​    name: 'Home',
​    component: Home,
    
     meta: {
    // 名字：值
    isAlive:true. //自定义的名字 false代表不缓存
    // 需要缓存的就在写城isAlive: true
		}

  }

]

keep-alive的使用

缓存之后不进行created,mounted,update，只进行activated, deactivated 这两个生命周期

activated   // 组件激活 缓存之后 其他的不会走 但是这个每次进去都触发

deactivated  // 组件走了 （被切换了）

1.怎么缓存？ Keep-alive标签包裹

2.缓存了 我突然需要缓存的组件重新发送请求换数据？

// 缓存的组件还提供了activated的生命周期。可以在这里面重新发送请求。

经常需要缓存的组件

列表（因为很长）、到详情页返回又回到列表