vue使用keep-alive实现跳转页面保留原来筛选条件

前言：经常会有一个列表页一个详情页。在列表页点击查看详情按钮跳转至详情页，看完详情跳转回列表页时，要保留之前的筛选条件这样的需求，如果是缓存各个条件就显得太麻烦了，或者重开界面也可以达到保留的目的，本篇主要是介绍vue使用keep-alive实现跳转页面保留原来筛选条件
原理：keep-alive 是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。结合vue-router中使用，可以缓存某个view的整个内容。
具体操作如下
1.在APP.vue配置是否缓存

<div id="app">
   <!-- 缓存所有的页面 -->
     <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
     </keep-alive>
     <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>

2.在router中设置meta属性，设置 keepAlive: true 表示需要使用缓存,不设置或者设置为false表示不需要缓存

 {
    path: "/monitor",
    name:'Monitor',
    component: () => import(/* webpackChunkName: `monitor` */ '@/views/InternetManagement/monitor.vue'),
    meta: {
      plate:"InternetManagement",
      title: "属地智能搜索",
      icon: "icon-wg-menu1",
      menu: "show",
      menuName: "Monitor",
      keepAlive: true // true 表示需要使用缓存
    },
    children: []
  },

这样就可以达到需要的目的了