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

前言：首先什么是“前进刷新后退不刷新”呢，好比我有一个数据列表页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参数的样子。。。。