vue路由中前进后退的一些事儿

深入了解Vue路由中的前进与后退：关于Keep-Alive的小

前言：

在我们日常的Vue开发过程中，路由的跳转无疑是核心功能之一。有时，我们需要在页面间跳转时，对某些页面进行状态保持，而对其他页面进行刷新。最近，我在一个项目中遇到了这样的需求，并决定深入研究一下如何实现。这里我要分享的是关于Vue路由中Keep-Alive的一些和实践。

理解场景：

我们从一个页面A跳转到页面B，然后在页面B执行某些操作后，再跳转到页面C。之后，从页面C返回到页面B时，我们希望页面B保持之前的状态。当我们返回到页面A时，页面B的状态不应该被保留。简单来说，就是前进时刷新页面，后退时不刷新。

解决方案：

很多小伙伴可能会想到使用Vue的Keep-Alive组件来实现页面缓存。没错，这也是我首先尝试的方法。

一、使用Keep-Alive缓存页面：

Keep-Alive是Vue官方提供的一个用于缓存组件实例的方法。

1. 替换的展示方式：

使用包裹需要被缓存的页面。通过的v-if指令，控制哪些组件需要被缓存，哪些不需要。

示例代码：

```html

```

2. 在路由配置中设置组件是否缓存：

在路由配置文件中，为每个路由路径设置meta字段，通过keepAlive属性来决定该组件是否需要被缓存。

示例代码：

```javascript

routes: [

{ path: '/', name: 'Index', component: Index, meta: { title: '博物馆', keepAlive: false } }, // 不缓存

{ path: '/searchMain', name: 'SearchMain', component: SearchMain, meta: { title: '搜索', keepAlive: true } }, // 缓存

// 其他路由配置...

]

```

这样设置后，被缓存的组件将一直保留状态。我们还需要根据路由跳转的情况来改变缓存组件的状态。

二、使用路由钩子改变缓存组件的状态：

缓存组件的生命周期之旅与解决方案

当我们谈论Vue组件的生命周期时，缓存组件的生命周期显得尤为独特。让我们揭开它的神秘面纱，深入了解其生命周期的执行顺序以及面临的挑战。

当首次进入keep-alive组件时，它的生命周期按照以下顺序执行：

beforeRouteEnter -> created -> mounted ... -> activated -> deactivated。这意味着在组件被激活时，会触发一系列的生命周期函数。而在非进入时，它的生命周期执行顺序为：beforeRouteEnter -> activated -> deactivated。这为我们提供了一个观察缓存组件生命周期的窗口。

当我们第二次进入同一个Vue组件时，我们会发现组件的生命周期函数并未执行。这是因为缓存机制阻止了组件的销毁和重新创建，导致无法更新数据。这似乎是一个棘手的问题，但我们可以通过编程的方式来解决它。

解决方案一：利用路由元数据标记

我们可以在activated函数中增加一个判断逻辑，通过路由元数据标记来决定是否需要获取新数据。例如：

activated() {

if (!this.$route.meta.isBack) { // 如果isBack是false，表明需要获取新数据，否则就不再请求，直接使用缓存的数据

this.getData(); // ajax获取数据方法

}

// 恢复成默认的false，避免isBack一直是true，导致下次无法获取数据

this.$route.meta.isBack = false;

}

通过这种方法，我们可以在一定程度上控制数据的更新。如果之前保存在data中的数据没有变化，这种方法可能还不够彻底。我们需要寻找更全面的解决方案。

终极解决方案：动态key值管理缓存组件的生死

我们可以通过动态给要缓存的路由组件添加key值来解决问题。在Vue中，我们可以使用key属性来控制组件的复用和销毁。通过设置不同的key值，我们可以强制Vue重新创建组件并获取新的数据。同时我们可以结合Vuex来动态改变key的值。在离开当前路由时销毁缓存的组件以释放内存资源。以下是代码示例：

在模板中使用keep-alive包裹router-view并设置key属性：