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

Question

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

我有两条主要路线，分别显示了两个不同的组成部分 router-view

• 单击路径1时，路径为：“ / route-1”

• 单击路径2时，路径为：“ / route-2 / sub-route-a”

Route-2的router-view内部包含另一个，显示两个子路由：

• 子路由

• 子路由b

当路由-2被点击它打开的部分路线-2与子路由一个预开设了router-view

Route-2内的主路由器视图和路由器视图都包装在keep-alivetag内，以便进行缓存

缓存，一切正常。

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

• 这是第一次对预期的全部组件beforeCreate()，created()，beforeMount()，mounted()钩子被调用。

• 由于router-view在keep-alive元素下，因此该activated()钩子也称为

• 每当我来回移动之间的Route-1和路径2的activated()和deactivated()输入并分别放置每个组件时钩子被称为

我的问题来了

• 从什么时候开始的Route-2被点击它打开的部分 路线-2与子路由一在其预先打开router-view，所有的生命周期挂钩子路由一个 componenents被称为只有一次

• 当我回去的Route-1 deactivated()的路由-2的调用，但没有勾子路径，一个被调用。

• 仅当我在子路由a和子路由b之间切换时，这些组件的activated()和deactivated()挂钩才被调用

• 上的随后进入的Route-2 activated()的钩的Route-2被称为但没有的钩子路由一个被称为

• 我想缓存子路由 -a，但在每次输入时对其进行更改。因此，由于第一次没有调用生命周期挂钩，因此我将代码放在哪里。

• **我不想使用** beforeEnter()

Answer 1

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

在 2.2.0 及更高版本中，激活和停用将对树内的所有嵌套组件触发。

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

更新使用：npm update --save vue