为了清楚理解,我将以更一般化的方式解释我的问题,这里是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-alive
,beforeCreate()
,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()
答案 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