vue.js - Vuejs : Lifecycle hooks of child routerview components using keep alive

Question

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

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

• Route-1 点击后路径为:'/route-1'

• Route-2 当点击路径时:'/route-2/sub-route-a'

Route-2 包含另一个 router-view，它显示两个子路由:

• 子路由-a

• 子路由-b

当点击 Route-2 时，它会打开 Route-2 的组件，并在其 router-view 中预先打开 sub-route-a

主路由 View 和 Route-2 中的路由 View 都被包裹在 keep-alive 标签中，以便它们被缓存

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

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

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

• 由于路由器 View 位于 keep-alive 元素下，因此 activated() Hook 也被调用

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

我的问题来了

• 因为当 Route-2 被点击时它打开了组件 Route-2 在其 router-view 中预先开启了 sub-route-a，sub-route-a 组件的所有生命周期钩子(Hook)只被调用一次

• 当我回到Route-1时调用了Route-2的deactivated()但是没有sub-route-a 被调用。

• 只有当我在 sub-route-a 和 sub-route-b 之间切换时，这些组件的 activated() 和 deactivated() 钩子(Hook)才会被调用

• 随后进入Route-2 activated() 调用Route-2 的 Hook 但没有调用sub-route-a 的 Hook > 被称为

• 我想缓存 sub-route-a 但在每次输入时对其进行更改。那么我应该把代码放在哪里，因为没有生命周期钩子(Hook)是第一次调用 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://v2.vuejs.org/v2/api/#keep-alive

更新使用:npm update --save vue