Keep-alive is a built-in component of the VUE that allows the contained component to be left in a preserved state or to avoid being rerendered.

<div>
    <keep-alive>
        <router-view></router-view><!-- The components in this are cached in the-->
    </keep-alive>
</div>

Next, let’s combine the Settings of router caching section page
in app.vue

<template>
  <div id="app">
    <!-- This is with the components. -->
		<!-- add cache -->
        <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>

Add the configuration meta
router to configure keep, which requires true cache instead of false

{
	path: '/shop_detail',
	name: 'shop_detail',
	component: shop_detail,
		meta:{
			keep:true  // keep(optional name) true means the page needs to be cached.
		}
},
{
	 path: '/details',
	 name: 'details',
	 component: details,
	     meta:{
		    keep:false // keep(optional name) false means the page does not need to be cached.
	}
},