Vuejs2 为什么在第一次访问时不调用激活的生命周期挂钩

我遇到了一个问题，即

路由器视图中保持活动状态的组件在第一次创建时没有调用其
激活的
生命周期挂钩。正在调用
创建的
和
装载的
生命周期挂钩。在第二次访问时，调用
激活的
钩子

这个场景相当复杂，因为其中涉及到一些嵌套和插槽使用

我试图创建一个最小的示例，您可以在下面找到，或者更详细一点

不幸的是，它是相当大的，仍然没有真正的代码复杂，不幸的是我不能分享

更糟糕的是，我没有在我的最小示例中重现实际问题。在这里，当第一次访问
SloteSample
时，将调用
创建的
、
装载的
和
激活的
生命周期挂钩

在我的真实代码中，只有
创建的
和
安装的
，生命周期挂钩在第一次访问时被调用，而
激活的
挂钩在后续访问时被调用。有趣的是，所有生命周期钩子都按预期为
SlotParent
调用

真正的代码涉及更多的嵌套，并利用插槽来使用布局组件

我的代码使用的是Vue 2.5.16和Vue Router 3.0.1，但它在Due 2.6.7和Vue Router 3.0.2中也没有预期的效果。我也在使用Vuetify和Vue Head，但我认为这与我的问题无关

index.js

有人知道我可能做错了什么吗。我怀疑vue路由器中有一个bug
使用多个嵌套插槽时，
保持活动状态
，但无法复制

index.js

import Vue from "vue";
import VueRouter from "vue-router";
import App from "./App.vue";
import Start from "./Start.vue";
import SlotExample from "./SlotExample.vue";

const routes = [
    {
        path: "/start",
       component: Start
    },
    {
        path: "/slotExample/:id",
        component: SlotExample,
        props: true
    }
];

const router = new VueRouter({ routes });

Vue.use(VueRouter);

new Vue({
    render: h => h(App),
    router,
    components: { App }
}).$mount("#app");

App.vue

<template>
    <div id="app">
        <div>
            <keep-alive><router-view/></keep-alive>
        </div>
    </div>
</template>



SlotExample.vue

<template>
    <div>
        <h1>Slot Example</h1>
        <router-link to="/start"><a>start</a></router-link>
        <router-link to="/slotExample/123">
    <a>slotExample 123</a>
  </router-link>
        <slot-parent :id="id">
            <slot-child
                slot-scope="user"
                :firstName="user.firstName"
                :lastName="user.lastName"/>
        </slot-parent>
    </div>  
</template>

<script>
    import SlotParent from "./SlotParent.vue";
    import SlotChild from "./SlotChild.vue";
    export default {
        name: "slotExample",
        components: { SlotParent, SlotChild },
        props: {
            id: {
                type: String,
                required: true
            }
        }
    };
</script>


插槽示例
开始
slotExample 123
从“/SlotParent.vue”导入SlotParent；
从“/SlotChild.vue”导入SlotChild；
导出默认值{
名称：“SloteSample”，
组件：{SlotParent，SlotChild}，
道具：{
身份证：{
类型：字符串，
必填项：true
}
}
};

SlotParent.vue

<template>
    <div>
        <div slot="header"><h1>SlotParent</h1></div>
        <div slot="content-area">
            <slot :firstName="firstName" :lastName="lastName" />
        </div>
    </div>
</template>

<script>
    export default {
        name: "slotParent",
        props: {
            id: {
                type: String,
                required: true
            }
        },
        computed: {
            firstName() {
                if (this.id === "123") {
                    return "John";
                } else {
                    return "Jane";
                }
            },
            lastName() {
                return "Doe";
            }
        }
    };
</script>


槽租金
导出默认值{
名称：“slotParent”，
道具：{
身份证：{
类型：字符串，
必填项：true
}
},
计算：{
名字（）{
如果（this.id==“123”）{
返回“约翰”；
}否则{
返回“Jane”；
}
},
姓氏（）{
返回“Doe”；
}
}
};

SlotChild.vue

<template>
    <div>
        <h2>SlotChild</h2>
        <p>{{ firstName }} {{ lastName }}</p>
    </div>
</template>

<script>
    export default {
        name: "slotChild",
        props: {
            firstName: {
                type: String,
                required: true
            },
            lastName: {
                type: String,
                required: true
            }
        },
        created() {
            console.log("slotChild created");
        },
        mounted() {
            console.log("slotChild mounted");
        },
        activated() {
            console.log("slotChild activated");
        }
    };
</script>


懒鬼
{{firstName}}{{lastName}}

导出默认值{
姓名：“懒鬼”，
道具：{
名字：{
类型：字符串，
必填项：true
},
姓氏：{
类型：字符串，
必填项：true
}
},
创建（）{
log（“创建的slotChild”）；
},
安装的（）{
console.log（“slotChild-mounted”）；
},
激活的（）{
console.log（“slotChild已激活”）；
}
};
我认为您需要将
SlotChild
放在
保持活动
块中

看一看
这样做甚至会破坏我的最小示例。SlotChild不再加载。