路由在切换时，发现特别奇葩的情况，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")
          }
        ]
      }

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

页面配置如下：

<!-- 首层router-view -->
<div id="app">
    <keep-alive>
      <router-view v-if="$route.meta && $route.meta.keepAlive" />
    </keep-alive>
    <router-view
      v-if="!$route.meta || ($route.meta && !$route.meta.keepAlive)"
    ></router-view>
 </div>

<!-- 第二层router-view  task/index.vue-->
<keep-alive>
     <router-view v-if="$route.meta.keepAlive"></router-view>
 </keep-alive>
 <router-view v-if="!$route.meta.keepAlive"></router-view>

解决方式

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、调整第二层路由,全部缓存：

<keep-alive>
     <router-view></router-view>
 </keep-alive>

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

结束。