vue3 keepalive一种形式

  <div class="app">
      <router-view v-slot="{ Component }">
        <keep-alive>
          <component :key="$route.path" :is="Component" v-if="$route.meta.keepAlive" />
        </keep-alive>
        <component :key="$route.path" :is="Component" v-if="!$route.meta.keepAlive" />
      </router-view>
    </div>





onActivated(() => {
  console.log("onActivated的执行")
})


  


const routes = [
  {
    path: "/",
    redirect: "/home",
  },
  {
    path: "/home",
    component: () => import("../views/home.vue"),
    meta: {
      title: "我的",
      icon: "manager",
      showBar: true,
    },
  },
 {
    path: '/detail',
    component: () => import('../views/detail.vue'),
    meta: {
        title: '详情',
        icon: 'manager',
        keepAlive:true,
        showBar:true
    },
},
];




const router = createRouter({
  history: createWebHashHistory(), //替代之前的mode，是必须的
  routes: routes.concat(...routeModuleList),
  scrollBehavior: () => ({ left: 0, top: 0 }),
});

router.beforeEach((to, from, next) => {
    if (to.path === "/detail") {
        if (JSON.stringify(to.query) === "{}") {
            to.meta.keepAlive = false;
        } else {
            to.meta.keepAlive = true;
        }
    }

    next(); // 跳转到下一个路由
});

代码块

代码块

代码块