Keep-alive include&exclude

<keep-alive exclude="mine">
<keep-alive include="home,shiporder">
Copy the code
  • Name of the corresponding Component
@Component({
  name: "mine"
})
Copy the code
  • Exclude takes a higher priority

If the keep-alive page is at the same level ()

  • The structure of the 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")
  },
Copy the code
  • App.vue (specifying home,shiporder,mine here does not work)
 <keep-alive include="layout">
  <router-view />
</keep-alive>
Copy the code
  • Layout/index. Vue (designated detailInfo here, deliver, layout is not effective)
<keep-alive include="home,shiporder">
  <router-view />
</keep-alive>
Copy the code

Or exclude=”mine”

The TAB page cache is invalid

  • Because the cache detail page (detailInfo) is not specified in app.vue
 <keep-alive include="layout,detailInfo">
  <router-view />
</keep-alive>
Copy the code

When entering page A, if it meets the cache conditions, it will be cached, and the details will be reconnected from page A to page B. If page B does not meet the conditions, the page A that was previously keep-alive will be destroyed, so enter the page A list again to create A list