Vue利用keep-alive实现页面缓存

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 表示页面不需要缓存
	}
},