vue中keep-alive缓存实现页面跳转返回不刷新

          <!-- 用if判断路由元信息内keepAlive是否为true如果是就缓存 -->
          <keep-alive v-if="$route.meta.keepAlive">
              <router-view></router-view>
          </keep-alive>
            <router-view v-else></router-view>

{
        //产品管理
        path:"/product/all",
        name:"product",
        //添加一个属性，用来判断是否需要缓存。
        meta:{bread:["产品管理","全部产品"],keepAlive:true},
        component:()=>import("../views/product/All.vue")
      },
      {
        //详情子页
        path:"/product/detail",
        name:"jump",
        //添加一个属性，用来判断是否需要缓存。
        meta:{keepAlive:true,bread:["产品管理","全部产品","产品详情"]},
        component:()=>import("../views/product/detail.vue")
      },

1，路由方式：直接在route-view外面包一个keep-alive就可以缓存，但是会把不需要缓存的也缓存了。所以以用if方法动态判定要不要缓存
注意：需要缓存的页面都要添加。只添加一个不生效
通过v-if判断来动态缓存

2，动态组件方式：直接组件外包裹，可以让这个组件缓存。

      <keep-alive>
            <component :is="currentTabComponent"></component>
      </keep-alive>