У меня проблема с тем, что компонент внутри router-view, который поддерживается живым, не вызывает свою ловушку activated жизненного цикла при первом создании.Вызваны хуки жизненного цикла created и mounted.При втором посещении вызывается хук activated.
Сценарий довольно сложный, поскольку в нем задействовано немного вложенности и использования слотов.
Я пытался создатьминимальный пример, который вы можете найти ниже, или чуть более подробно о https://codesandbox.io/s/251k1pq9n.
К сожалению, он довольно большой и все же не такой сложный, как реальный код, которым я, к сожалению, не могу поделиться.
Хуже того, мне не удалось воспроизвести реальную проблему в моем минимальном примере.Здесь все ловушки жизненного цикла created, mounted и activated вызываются при первом посещении SlotExample.
В моем реальном коде только хуки жизненного цикла created и mounted вызываются при первом посещении, хук activated вызывается при последующих посещениях.Интересно, что все ловушки жизненного цикла вызываются, как и ожидалось, для 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-router при использовании нескольких вложенных слотов и keep-alive, но не могу воспроизвести.
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>
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>
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>