Vuejs:使用keep alive的子routerview组件的生命周期钩子 [英] 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:
子路由-a
子路由-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
缓存，一切正常.
我添加了所有生命周期钩子并使用 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 及更高版本中，激活和停用将触发所有嵌套树内的组件.
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:使用keep alive的子routerview组件的生命周期钩子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
