vue的keep-alive缓存页面

vue-router和 keep-alive 配合使用

1. 在router-view外面套一层 keep-alive 标签, 并且对 有无 meta的情况进行判断(meta待会写)

   <keep-alive>
       <router-view v-if="$route.meta.keepAlive" />
   </keep-alive>
   <router-view v-if="!$route.meta.keepAlive" />
   

2. 在需要缓存的路由页面 添加 meta:{keep-alive:true}

   { path: 'searchResult',
       component:() => import('../views/home/pages/components/serchResult.vue'),
       meta:{keepAlive:true}
   }
   

3. 注意 哪个 router-view下的页面需要缓存,就给这个router-view执行上面的操作, 要添加keep-alive的router-view不要是页面的长辈