Vue组件keepAlive实现返回上一页保存原数据

在页面中输入搜索条件跳转到详情页，从详情页返回要保留原页面输入的搜索条件及搜索的结果。效果如下：

这里用到了vue的内部组件keepAlive

router.js

注：列表页需要缓存  keepAlive: true，详情页不需要缓存  keepAlive: false

 routes: [
    {
      path: '/',
      name: 'index',
      //component: Home
      component: () => import('./views/index/index.vue'),
      meta: {
        keepAlive: true // 需要缓存
      }
    },
    {
      path: '/content/:contentId',
      name: 'content',
      component: () => import('./views/index/content.vue'),
      meta: {
        keepAlive: false // 不需要缓存
      }
    },
]

App.vue

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