Vuejs：使用keep alive的子路由器视图组件的生命周期钩子-Java 学习之路

为了清楚理解，我将以更一般化的方式解释我的问题，这里是jsFiddle

我有两个主要路线，在 router-view 中显示两个不同的组件

单击

单击

Route-2 在其中包含另一个 router-view ，它显示两个子路径：

单击 Route-2 时，将打开 Route-2 的组件，并在其 router-view 中预先打开 sub-route-a

主路由器视图和 Route-2 内的路由器视图都包含在 keep-alive 标签内，以便它们被缓存

缓存和一切正常工作 .

我添加了所有生命周期钩子并使用console.log查看调用了哪个钩子

首次按预期方式对所有组件调用 beforeCreate() ， created() ， beforeMount() ， mounted() 钩子 .
因为router-view在 keep-alive 元素下，所以 activated() 钩子也被调用
每当我在 Route-1 和 Route-2 之间来回移动时， activated() 和 deactivated() 钩子在输入时被调用，并且每个组件分别被左侧调用

这是我的问题

因为单击 Route-2 时会打开 Route-2 的组件，并在 router-view 中预打开 sub-route-a ， sub-route-a 组件的所有生命周期挂钩仅被调用一次
当我回到 Route-1 deactivated() 的 Route-2 被调用但是没有调用 sub-route-a 的钩子 .
仅当我在 sub-route-a 和 sub-route-b 之间切换时，会调用这些组件的 activated() 和 deactivated() 钩子
在后续输入 Route-2 activated() Route-2 的钩子被调用但没有 sub-route-a 的钩子被调用
我想缓存 sub-route-a ，但每次输入都要对其进行更改 . 那么我在哪里放置代码，因为没有生命周期钩子第一次被称为excrpt .
我不想用 beforeEnter()

1 回答