Vuejs:使用keep alive的子路由器视图组件的生命周期钩子

时间:2017-05-02 10:15:53

标签: vue.js vuejs2 vue-component vue-router

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

我有两条主要路线,显示router-view

中的两个不同组件
    点击路径为
  • 路线1 :'/ route-1'

  • 点击路径为
  • 路线2 :'/ route-2 / sub-route-a'

路由2 在其中包含另一个router-view,其中显示两条子路径:

  • 子路由一个

  • 子路径-B

点击路线2 后,会打开路线2 的组件,其中子路线-a 预先打开{ {1}}

Route-2 中的主路由器视图和路由器视图都包含在router-view标记内,以便缓存它们

缓存,一切正常。

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

  • 首次按预期对所有组件调用keep-alivebeforeCreate()created()beforeMount()挂钩。

  • 由于路由器视图位于mounted()元素下,keep-alive挂钩也称为

  • 每当我在 Route-1 Route-2 之间来回移动时,activated()activated()挂钩都会被调用分别为每个组件输入和离开

这是我的问题

  • 单击 Route-2 时会打开组件 路线2 ,其deactivated()预先打开子路线-A ,所有生命周期挂钩子路线-a 组件只被调用一次

  • 当我回到路线1 router-view 路线2 时,会调用子路线 - a 被调用。

  • 仅当我在 sub-route-a sub-route-b 之间切换deactivated()activated()个钩子时这些组件称为

  • 随后输入路线2 deactivated() 路线2 的钩子被调用,但没有子路线的钩子 - a 被称为

  • 我想缓存 sub-route-a ,但每次输入都会对其进行更改。那么我在哪里放置代码,因为第一次没有生命周期钩子被称为exrpt。

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

1 个答案:

答案 0 :(得分:1)

将您的vue版本升级到2.2.0或更高版本。小提琴有2.3.2,最新的一个。你的本地版本是2.1.0。

  

在2.2.0及更高版本中,激活和取消激活将触发所有嵌套   树中的组件。

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

使用以下内容进行更新:npm update --save vue