Vuejs:使用保持活动状态的子路由视图组件的生命周期钩子 [英] Vuejs: Lifecycle hooks of child routerview components using keep alive
问题描述
为了清楚地理解,我将以更概括的方式解释我的问题,这里是 jsFiddle
I'll explain my issue in a more generalized way for the purpose of clear understanding and here is the jsFiddle
我有两条主要路由,它们在 router-view
I have two main routes which show two different components in the router-view
Route-1 点击路径是:'/route-1'
Route-1 when clicked the path is: '/route-1'
Route-2 点击路径是:'/route-2/sub-route-a'
Route-2 when clicked the path is: '/route-2/sub-route-a'
Route-2 在其中包含另一个 router-view
,它显示了两个子路由:
Route-2 contains a another router-view
inside it which displays two sub routes that are:
sub-route-a
sub-route-b
当点击 Route-2 时,它会打开 Route-2 的组件,并在其 sub-route-a 中预先打开代码>路由器视图
When Route-2 is clicked it opens the component of Route-2 with sub-route-a pre-opened in its router-view
Route-2 中的主路由器视图和路由器视图都包裹在 keep-alive
标签中,以便缓存
Both the main router-view and the router-view inside Route-2 are wrapped inside keep-alive
tag so that they are cached
缓存和一切都按预期正常工作.
Caching and everything works fine as expected.
我添加了所有生命周期钩子并使用console.log查看调用了哪个钩子
I added all the lifecycle hooks and using console.log to see which hook is called
对于所有组件,第一次按预期使用
beforeCreate()
,created()
,beforeMount()
,mounted()
钩子被调用.
For the first time for all components as expected the
beforeCreate()
,created()
,beforeMount()
,mounted()
hooks are called.
由于路由器视图在 keep-alive
元素下,activated()
钩子也被称为
since the router-view is under keep-alive
element the activated()
hook is also called
每当我在 Route-1 和 Route-2 之间来回移动时,activated()
和 deactivated()
为每个组件分别在进入和离开时调用钩子
whenever I move to and fro between Route-1 and Route-2 the activated()
and deactivated()
hooks are called when entered and left respectively for each component
我的问题来了
自从点击 Route-2 后,它会打开Route-2 和 sub-route-a 在其
router-view
中预先打开,sub-route- 的所有生命周期钩子a 组件只调用一次
Since when Route-2 is clicked it opens the component of Route-2 with sub-route-a pre-opened in its
router-view
, all lifecycle hooks of sub-route-a componenents are called only once
当我回到Route-1时Route-2的deactivated()
被调用但没有的钩子>sub-route-a 被调用.
when I go back to Route-1 deactivated()
of Route-2 is called but no hook of sub-route-a is called.
仅当我在 sub-route-a 和 sub-route-b 之间切换时,activated()
和 deactivated()
调用这些组件的钩子
only when I toggle between sub-route-a and sub-route-b the activated()
and deactivated()
hooks of these components are called
随后进入Route-2 activated()
调用Route-2的钩子,但没有的钩子>sub-route-a 被称为
on subsequent entering of Route-2 activated()
hook of Route-2 is called but no hook of sub-route-a is called
我想缓存 sub-route-a,但在每次进入时都要对其进行更改.那么我应该把代码放在哪里,因为第一次没有生命周期钩子被调用.
I want to cache sub-route-a but make changes to it on every enter. So where do I put the code since no lifecycle hook is being called excrpt for the first time.
**我不想用** beforeEnter()
推荐答案
将您的 vue 版本升级到 2.2.0 或更高版本.小提琴有2.3.2,最新的.而你的本地版本是 2.1.0.
Upgrade your vue version to 2.2.0 or greater. The fiddle has 2.3.2, the latest one. And your local version is 2.1.0.
在 2.2.0 及以上版本中,activated 和deactivated 将触发所有嵌套的树内的组件.
In 2.2.0 and above, activated and deactivated will fire for all nested components inside a tree.
在这里阅读:https://vuejs.org/v2/api/#keep-活着
更新使用:npm update --save vue
这篇关于Vuejs:使用保持活动状态的子路由视图组件的生命周期钩子的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!