vue单页实现前进刷新后退不刷新

最新推荐文章于 2024-08-29 17:21:23 发布

转载最新推荐文章于 2024-08-29 17:21:23 发布 · 310 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c2f03c6f265da615f776792

文章标签：

#javascript #ViewUI

本文详细解析了在Vue应用中如何实现前进刷新、后退不刷新的功能，利用keep-alive组件和路由元信息进行状态管理和条件判断，确保用户体验的同时优化性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：首先什么是“前进刷新后退不刷新”呢，比如我有一个数据列表页A、数据详情页B和其他页面C，在浏览页面A然后进入B以后，如果返回页面A 那原来浏览的页码总要保存吧，不能每次人家返回都要从第一页开始重新翻，这就需要后退不刷新了。那么前进不刷新就是用户从其他页C进入A，自然是要从第一页开始的，不需要保存状态所以要刷新。

首先，先实现后退不刷新来：在vue-router中有提供一个keep-alive的标签，刚开始我也不知道这货干嘛用的，直到这次。它的作用从字面意思就是保存活性，即会保存其中内容不会销毁，用法：

这样在路由离开当前页的时候，组件就不会被销毁了,但是也不是所有的页面都需要保存的，怎么办呢，这时候就需要条件来判断了

1.在每个路由设置中的meta对象添加一个keepAlive属性，如下:

2.然后前面的keep-alive换个用法，只在当前路由的keepalive属性为true的时候才用keep-alive包裹

做到这一步，就实现了页面不刷新，但这个不刷新是无脑的并不是有选择的，怎么实现按照情况刷新和不刷新呢？那当然需要判断条件了对不对，判断什么呢？判断从哪个页面进来的应该可以，咱们试试在A页面组件beforeRouteEnter（有关router的生命周期请自行查阅资料）钩子中添加判断， if(from.name === 'B')｛｝，如果是从B页面返回的那就从新获取数据，但是问题来了。此时（beforeRouteEnter）无法获取vue实例，所以不能在这里直接调用组件的数据更新方法，所以我们需要在路由中meta对象添加一个requireAuth属性（属性名随意）用来保存判断，然后在activated钩子中（此时已经可以获取this实例）通过判断requireAuth来决定时候更新数据。如图：

此时，页面应该已经实现根据条件来决定是否刷新数据。

我突然想到一个问题既然在beforeRouteEnter中判断时不能获取this实例，导致需要在路由中存一个变量然后在activated中执行函数。那么为什么不在activated中直接判断并执行呢？？？

哦好吧。 activated钩子没有from参数的样子。。。。

转载于:https://juejin.im/post/5c2f03c6f265da615f776792