keep-alive是vue内置的一个组件，可以使被它包含的组件处于保留状态，或避免被重新渲染。
<div>
<keep-alive>
<router-view></router-view><!-- 在这个里面的组件都会被缓存-->
</keep-alive>
</div>
接下来让我们来结合router缓存部分页面
在App.vue中的设置
<template>
<div id="app">
<!-- 这里是跟组件 -->
<!-- 加上缓存 -->
<keep-alive>
<router-view v-if="this.$route.meta.keep"></router-view>
</keep-alive>
<router-view v-if="!this.$route.meta.keep"></router-view>
</div>
</template>
在router中增加配置meta
router中配置keep，需要缓存为ture，不需要为false
{
path: '/shop_detail',
name: 'shop_detail',
component: shop_detail,
meta:{
keep:true // keep(可随意命名) true 表示页面需要缓存
}
},
{
path: '/details',
name: 'details',
component: details,
meta:{
keep:false // keep(可随意命名) false 表示页面不需要缓存
}
},
