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

2022-01-25 00:00:00 vue.js vue-router vue-component vuejs2

为了清楚理解,我将以更笼统的方式解释我的问题,这里是 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

相关文章