vue路由在使用keep-alive缓存之后第二次进入页面created和mounted不执行问题及解决

一、keep-alive介绍

1. 什么是 keep-alive？

Vue.js 中 keep-alive 是一个内置组件，可以在需要缓存的组件上添加keep-alive 标签，使得这个组件被缓存起来，不会被多次渲染和销毁。keep-alive 组件有两个独立的生命周期钩子，分别是 activated 和 deactivated。

2. 如何使用 keep-alive?

在需要缓存的组件外部添加一个 keep-alive 标签，示例如下：

<template>
  <div>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

这个例子中，我们将路由组件放到 keep-alive 标签内部，实现路由组件的缓存。

3. keep-alive 的作用

使用keep-alive可以有效地提高应用的性能。因为在组件被缓存的时候，即使组件被切换出去，它的状态依旧被保留。当再次切换到被缓存的组件时，不需要重新渲染和初始化组件，可以直接复用缓存的组件，从而加快页面的响应速度。

除此之外，还可以结合 activated 和deactivated生命周期钩子实现一些额外的功能。例如，在组件离开缓存页面时，使用 deactivated 钩子进行数据的清理和状态的重置。当组件再次出现在缓存页面时，使用 activated 钩子进行数据的恢复和状态的还原

4. keep-alive的include和exclude

• include：用于指定哪些组件需要被缓存，可以是组件名称一类的标识符，也可以是使用正则表达式进行匹配。在keep-alive中存在的缓存组件只有包含在include中才会被缓存，否则会被销毁。
• exclude：用于指定哪些组件不需要被缓存，同样可以使用标识符或正则表达式进行匹配。在keep-alive中存在的缓存组件中，如果包含在exclude中，则不会被缓存，而是每次都需要重新创建。

例如，我们可以在使用keep-alive组件时，使用include和exclude来控制缓存浏览的页面。例如，在下面的代码中，我们可以指定只有Home和About两个组件才会被缓存：

<keep-alive :include="['Home', 'About']">
  <router-view></router-view>
</keep-alive>

而如果我们不想缓存某个组件，比如Login组件，我们可以使用exclude来指定这个组件：

<keep-alive :exclude="'Login'">
  <router-view></router-view>
</keep-alive>

当然，也可以使用正则表达式来进行匹配，例如：

<keep-alive :include="/^Home/">
  <router-view></router-view>
</keep-alive>

这段代码将会缓存以Home开头的所有组件。同时，我们也可以给include和exclude传递一个函数，该函数会在组件激活时被调用，根据返回值来确定组件是否被缓存。例如：

<keep-alive :include="component => component.name === 'Home'">
  <router-view></router-view>
</keep-alive>

这个例子中，只有组件名称为Home的组件才会被缓存。

二、缓存之后第二次进入页面created和mounted不执行问题及解决

这两个钩子不执行是应为咱得路由用了keep-alive缓存了，想要让其执行你可以直接去掉缓存就行了

<keep-alive :exclude="'Login'">
  <router-view></router-view>
</keep-alive>

就如上述代码，这样login页面中每次进入页面都会再次执行created和mounted

但是，有的场景是需要缓存，并且每次我们进入页面又得执行一些逻辑，这时用上述方式就不太符合需求，咱可以用activated钩子函数

直接将要处理的逻辑放在activated中就可以了，这样每次进入页面都会重新执行
用法和其他的生命周期钩子一样，直接加就行了。

activated() {
	console.log('要处理的逻辑')
}

在上面已经介绍了keep-alive 组件有两个独立的生命周期钩子，分别是 activated 和 deactivated。

• activated 当组件被激活（使用）的时候触发 可以简单理解为进入这个页面的时候触发
• deactivated 当组件不被使用（inactive状态）的时候触发 可以简单理解为离开这个页面的时候触发

这两个有点类似页面的生命周期mounted和beforeDestroy钩子

created,mounted,activated,deactivated钩子函数的执行顺序如下：

• 初始进入和离开 created —> mounted —> activated --> deactivated
• 后续进入和离开 activated --> deactivated