Vuejs:使用keep alive的子routerview组件的生命周期钩子-前端问题

Vuejs: Lifecycle hooks of child routerview components using keep alive(Vuejs:使用keep alive的子routerview组件的生命周期钩子)

本文介绍了Vuejs:使用keep alive的子routerview组件的生命周期钩子的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

问题描述

推荐答案

基础教程推荐