路由组件的缓存
当我们使用vue-router去进行组件切换的时候，组件会频繁进行创建和销毁，但是在实际应用中，我们需要对组件中的部分数据进行缓存，不希望数据丢失。所以这个时候出现了路由组件的缓存，先看以下没有对数据缓存的结果
在App.vue的代码如下
<template>
<div class="container">
<button @click="toBar">Bar</button>
<button @click="toFoo">Foo</button>
<router-view></router-view>
</div>
</template>
在进行组件跳转的时候，我们输入框的数据会丢失，那么我们可以通过vue的内置组件keep-Alice去保持组件的状态，使他不会被销毁。代码如下：
<template>
<div class="container">
<button @click="toBar">Bar</button>
<button @click="toFoo">Foo</button>
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
</template>
在通过keep-Alice内置组件之后，我们所有路由渲染的组件都会被保留状态，这往往不是我们想要达到的效果，所以我们新加了一个include属性去进行一个指定组件的状态保持，只需要添加include="组件名"
<template>
<div class="container">
<button @click="toBar">Bar</button>
<button @click="toFoo">Foo</button>
<keep-alive include="Bar">
<router-view></router-view>
</keep-alive>
</div>
</template>
