vue keep-alive实现页面缓存

实现列表页到详情页的跳转，其中列表页缓存查询参数

项目中需要实现，在列表页中的查询结果保存，跳转详情页，详情页跳转列表页时缓存列表页查询参数等，在使用keep-alive时遇到的几个问题

• 项目使用异步加载组件，捕捉不到beforeRouteLeave事件
• 路由模板的编写错误导致页面不能缓存

路由模板为

     <transition name="fade" mode="out-in">
        <keep-alive >
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
    </transition>
    
    <transition name="fade" mode="out-in">
        <router-view v-if="!$route.meta.keepAlive"></router-view>
    </transition>

router配置

    { path: '/approval-apply', component:  ApprovalApply, meta: { requireAuth: true, keepAlive: true } }, // 列表页设置keepAlive为true
    { path: '/approval-detail', component: ApprovalDetail, meta: { requireAuth: true, keepAlive: false } }, // 详情页设置keepAlive为false