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