vue-router keep-alive 跳往未使用keep-alive的页面会触发数据请求

Question

路由结构如下

{
        path: "withdrawRoot",
        name: "withdrawRoot",
        meta: { checkLogin: true, keepAlive: false },
        component: () =>
          import(
            /* webpackChunkName: "withdrawRoot" */ `@views/wallet/withdraw`
          ),
        children: [
          {
            path: "withdrawDefault",
            name: "withdrawDefault",
            meta: { checkLogin: true, title: "提现", keepAlive: true },
            component: () =>
              import(
                /* webpackChunkName: "withdrawDefault" */ `@views/wallet/withdraw/default.vue`
              )
          },
          {
            path: "withdrawBanks",
            name: "withdrawBanks",
            meta: { checkLogin: true, title: "选择提现账户", keepAlive: true },
            component: () =>
              import(
                /* webpackChunkName: "withdrawBanks" */ `@views/wallet/withdraw/bankList.vue`
              )
          },
          {
            path: "withdrawList",
            name: "withdrawList",
            meta: { checkLogin: true, title: "提现记录", keepAlive: false },
            component: () =>
              import(
                /* webpackChunkName: "withdrawList" */ `@views/wallet/withdraw/withdrawRec.vue`
              )
          }
        ]
      }

withdrawRoot.vue

<template>
  <div>
    <transition name="van-fade">
      <keep-Alive>
        <router-view v-if="$route.meta.keepAlive" />
      </keep-Alive>
    </transition>
    <transition name="van-fade">
      <router-view v-if="!$route.meta.keepAlive" />
    </transition>
  </div>
</template>

现在问题是 进入了 withdrawDefault keep-alive 为 true 进入同样keep-alive 为 true 的withdrawBanks , 以及返回 都能正常

但是跳往 withdrawList (keep-alive 为 false)的时候会触发 在withdrawDefault的create 函数中 的数据请求 ,反而进入withdrawList没有任何反应,
请问这是什么情况呢? 都改为keep-alive就好了

Answer 1

经过排查发现是写在两个不同的<router-view />标签中导致的
最终解决方案

<template>
  <div>
    <transition name="van-fade">
      <keep-alive :include="include">
        <router-view />
      </keep-alive>
    </transition>
  </div>
</template>
<script>
export default {
  data() {
    return {
      include: [
        "bankList",
        "withdrawDefault"
      ]
    }
  }
}
</script>

这里 数组中的name列表 为组件的name 并不是路由 的name