vue中为什么页面被包含,keep-alive就会失效

Question

最近在vue的实战中，发现一个问题。子路由的页面中如果存在<router-view />，我在进行页面切换的时候，order.vue页面不会被缓存。当我把order.vue注释掉之后，order.vue中的时间又可以被缓存了。

router.js

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue'),
    children: [
      {
        path: 'order',
        name: 'order',
        component: () => import('../views/order.vue'),
        children: [
          {
            path: 'order-time',
            name: 'OrderTime',
            component: () => import('../views/orderTime.vue')
          }
        ]
      },
      {
        path: 'mine',
        name: 'mine',
        component: () => import('../views/mine.vue')
      }
    ]
  }
]

home.vue

  <div class="home">
    <router-link :to="{ name: 'order' }">订单</router-link> |
    <router-link :to="{ name: 'mine' }">我的</router-link>
    <keep-alive>
      <router-view />
    </keep-alive>
  </div>

order.vue

<template>
  <div class="order">
    儿子路由：{{ new Date().getTime() }}
    <button @click="back">退出孙子路由</button>
    <button @click="inRouter">进入孙子路由</button>
    <router-view />
  </div>
</template>

<script>
export default {
  methods: {
    back() {
      this.$router.go(-1);
    },
    inRouter() {
      this.$router.push({
        path: "/order/order-time",
      });
    },
  }
};
</script>

mine.vue

<template>
  <div class="mine">
    我的页面
    {{ new Date().getTime() }}
  </div>
</template>