业务需求
打野在A页面野区进行一波骚操作打了一只蓝爸爸，然后点击导航栏跑到B页面的野区秀操作打了一只红爸爸，然后他又回到A野区，希望A野区还是只有一只蓝爸爸被打的状态，其他野没被偷
第一步
在路由里面设置需要缓存的页面
第二步
使用keep-alive属性包裹需要缓存的页面使用v-if判断，为true的是需要缓存的，false是不需要缓存的
第三步
在需要缓存的页面设置导航钩子，在A野区离开时将值设置为false保证离开当前野区不被偷
第四步
在其他野区浪一波离开时设置为true,保证回到A野区的时候野区不被刷新，还是原来的状态
补充知识：vue keep – alive 使用只有从固
在Vue.js应用中，页面缓存是一个常见的需求，特别是在页面状态需要在用户切换后保持的情况下。Vue提供了`keep-alive`组件来实现这一功能，它能够将组件的实例缓存下来，防止重新渲染。以下是对如何实现Vue页面跳转并进行缓存操作的详细解析：
1. **路由配置**：
在Vue Router的配置中，可以指定某些路由页面需要进行缓存。通过在路由元信息(`meta`)中添加`cache: true`标记，表明该页面需要被缓存。例如：
```javascript
{
path: '/page-a',
component: PageA,
meta: { cache: true }
},
{
path: '/page-b',
component: PageB,
meta: { cache: false }
}
```
2. **使用`keep-alive`组件**：
在需要缓存的页面组件的外层，使用`keep-alive`组件包裹。`keep-alive`会根据组件的元信息决定是否缓存。同时，可以通过`v-if`指令结合路由元信息来决定是否应用`keep-alive`：
```html
<keep-alive v-if="$route.meta.cache">
<router-view />
</keep-alive>
```
3. **导航钩子**：
在需要缓存的页面（如PageA）中，可以使用导航钩子函数`beforeRouteLeave`来管理缓存状态。在离开PageA时，设置一个标志（如`cached`）为`false`，避免页面状态被其他操作影响：
```javascript
beforeRouteLeave(to, from, next) {
this.cached = false; // 设置缓存标志为false
next();
}
```
4. **状态管理**：
当从其他页面（如PageC）返回PageA时，可能需要确保PageA的状态不变。同样地，当从PageA跳转到PageB时，如果PageB需要缓存，也需要处理相应状态。这通常涉及到全局状态管理工具，如Vuex。在`activated`钩子中，可以根据来源页面判断是否重置PageB的状态：
```javascript
activated() {
if (this.from === 'pageA') {
// 重置PageB的数据，因为来自PageA
this.resetData();
} else {
// 其他情况不做处理，保持缓存状态
}
}
```
这里的`from`属性可以通过`this.$route.params`或`this.$route.query`获取。
5. **条件性缓存**：
如果希望只有从特定页面跳转过来时才缓存页面，可以进一步扩展`beforeRouteLeave`和`activated`钩子。例如，只有当用户从PageA跳转到PageB时，PageB才缓存，而从PageC跳转则不缓存。这需要在路由配置、`keep-alive`以及导航钩子之间进行协调。
通过以上步骤，可以实现Vue页面跳转时的缓存控制，保证用户返回时页面状态得以保留。这种机制在处理复杂交互和数据时尤其有用，避免了不必要的加载和计算，提高了用户体验。同时，注意合理使用缓存，避免内存占用过多导致性能问题。
