vue使用keep-alive缓存页面失效的问题

keep-alive include&exclude的用法

<keep-alive exclude="mine">
<keep-alive include="home,shiporder">

• 对应component的名称

@Component({
  name: "mine"
})

• exclude 的优先级要高

keep-alive指定的页面要是再同一级别()

• router的结构

{
    path: "/",
    redirect: "/home",
    component: () => import("@/views/layout/index.vue"),
    children: [
      {
        path: "home",
        name: "home",
        meta: { active: 0 },
        component: () => import("@/views/home/index.vue")
      },
      {
        path: "shiporder",
        name: "shiporder",
        meta: { active: 1 },
        component: () => import("@/views/shiporder/index.vue")
      },
      {
        path: "mine",
        name: "mine",
        meta: { active: 2 },
        component: () => import("@/views/mine/index.vue")
      }
    ]
  },
  {
    path: "/detail",
    name: "detail",
    component: () => import("@/views/shiporder/detail.vue")
  },

• App.vue (在此处指定home,shiporder,mine是不起作用的)

 <keep-alive include="layout">
  <router-view />
</keep-alive>

• layout/index.vue(在此处指定detailInfo,deliver,layout是不起作用的)

<keep-alive include="home,shiporder">
  <router-view />
</keep-alive>

或者使用exclude="mine"

跳转详情返回tab页面缓存失效

• 因为没有在App.vue中指定缓存详情页面(detailInfo)

 <keep-alive include="layout,detailInfo">
  <router-view />
</keep-alive>

当进入A页面时，如果符合缓存条件就会缓存，从A页面跳转详情到B页面，如果B页面不符合条件，会把之前keep-alive的A页面进行销毁，所以再次进入到A列表页面重新创建