keep-alive路由组件离开后依然执行钩子函数的解决方式

路由在切换时，发现特别奇葩的情况，B页面是缓存页面，B页面点击跳转C页面时，执行了created、mounted钩子函数，从C页面返回到B页面时，执行了beforeDestroy钩子函数，这玩意儿完全是倒着执行，而且中间还穿插其他页面。

路由结构:

{
        path: "/task",
        meta: { index: 3, requireAuth: true, keepAlive: false },
        component: () => import("../views/Task/Index.vue"),
        children: [
          {
            path: "",
            name: "taskList",
            meta: { index: 3, requireAuth: true, keepAlive: true },
            component: () => import("../views/Task/Component/Table.vue")
          },
          {
            path: "map",
            name: "taskMap",
            meta: { index: 3, requireAuth: true, keepAlive: false },
            component: () => import("../views/Task/Component/Map.vue")
          }
        ]
      }

这只是第二级以上的路由配置，还有一级路由，而且一级路由上还有需要缓存的页面。

页面配置如下：

解决方式

1、修改路由配置中的task下所有子路由的keepAlive为true

{
   path: "/task",
   meta: { index: 3, requireAuth: true, keepAlive: true },
   component: () => import("../views/Task/Index.vue"),
   children: [
   {
     path: "",
     name: "taskList",
     meta: { index: 3, requireAuth: true, keepAlive: true },
     component: () => import("../views/Task/Component/Table.vue")
    },
    {
      path: "map",
      name: "taskMap",
      meta: { index: 3, requireAuth: true, keepAlive: true },
      component: () => import("../views/Task/Component/Map.vue")
     }
    ]
 }

2、调整第二层路由,全部缓存：

3、taskMap页面下是mounted 函数获取数据，调整为activated函数获取。

结束。