Vuejs：使用keep alive的子routerview组件的生命周期钩子

Question

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

我有两条主要路线，它们在 router-view

中显示了两个不同的组件

• Route-1 单击路径时：'/route-1'

• Route-2 单击路径时：'/route-2/sub-route-a'

Route-2 内部包含另一个 router-view，其中显示两条子路线：

• 子路由-a

• 子路由-b

当单击 Route-2 时，它会打开带有 sub-route-a 的 Route-2 的组件 在其 router-view

中预先打开

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

缓存和一切都按预期正常工作。

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

• 第一次为所有组件调用 beforeCreate()、created()、beforeMount()、mounted() 挂钩。

• 由于路由器视图在 keep-alive 元素下，因此 activated() 挂钩也被称为

• 每当我在 Route-1 和 Route-2 之间来回移动时 activated()和 deactivated() 钩子分别在每个组件进入和离开时调用

我的问题来了

• 因为当 Route-2 被点击时它打开组件 Route-2 with sub-route-a pre-opened in its router-view, sub 的所有生命周期钩子-route-a 组件只调用一次

• 当我回到 Route-1 deactivated() of 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()

Answer 1

将您的 vue 版本升级到 2.2.0 或更高版本。 fiddle 有 2.3.2，最新的。而你本地的版本是2.1.0.

In 2.2.0 and above, activated and deactivated will fire for all nested components inside a tree.

阅读此处：https://vuejs.org/v2/api/#keep-alive

更新使用：npm update --save vue