利用vue-router滚动行为与vue KeepAlive组件实现页面缓存

实现场景

相信很多小伙伴在写商城类项目时都会遇到的问题：

当我进入商品（或其他东西）的详情页，需要返回原先页面，发现原先页面刷新回到顶部了，并没有返回到原先的位置，这种体验感是非常差的！

下面我来利用vue-router滚动行为与vue KeepAlive组件实现页面缓存

滚动行为

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。

注意: 这个功能只在支持 history.pushState 的浏览器中可用。

当创建一个 Router 实例，你可以提供一个 scrollBehavior 方法：

const router = createRouter({
    history: createWebHistory(),
    routes,
    scrollBehavior(to, from, savedPosition) {
        if (savedPosition) {
          return savedPosition
        } else {
          return { top: 0 }
        }
      },
})

其中第三个参数 savedPosition 当前页面滚动的位置 当然只有原生浏览器的前进后退才能触发，如：router.go(-1) history.back() 都可以触发 其值为 {left: 0, top: 0}

当然你也可以不设置，只不过会出现你意想不到的bug

KeepAlive

<KeepAlive> 是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。

首先你得明确需要缓存的页面有哪些，并且了解你当前项目的路由结构

这是我的项目中的路由结构，/task_details 是任务的详情页 我的任务页是在 '/' 跟路由下的/task路由中，像这种跨路由的页面缓存处理起来是比较麻烦的

第一，需要在跟路由页面和二级路由页面配置

跟路由页面，这里的 include 表示 需要参与缓存的页面name 由于我需要缓存的页面在AppGather下的Task中，所以需要将 AppGather 纳入缓存页面的名单中

 <router-view v-slot="{ Component }">
    <keep-alive include="AppGather">
      <component :is="Component" />
    </keep-alive>
 </router-view>

其二，这里就是二级路由页面的配置，这里没有配置 include 是因为我需要缓存AppGather所有的的页面（目的是为了提升性能，你也可以选择配置）

<div>
    <router-view v-slot="{ Component }" class="router-view">
      <keep-alive>
        <component :is="Component"/>
      </keep-alive>
    </router-view>
    <van-tabbar v-model="active" :border="false" :route="true" active-color="#ed6a0c">
      <van-tabbar-item icon="wap-home" to="/home">首页</van-tabbar-item>
      <van-tabbar-item icon="completed" to="/task">任务</van-tabbar-item>
      <van-tabbar-item to="/new_task">
        <div class="new"><span>新</span><span>任</span><span>务</span></div>
      </van-tabbar-item>
      <van-tabbar-item icon="wechat-moments" to="/discovery">发现</van-tabbar-item>
      <van-tabbar-item icon="contact" to="/user">我的</van-tabbar-item>
    </van-tabbar>
</div>

配置到这其他就已经可以了，效果如下

屏幕录制 2024-04-29 112146

问题

接下来我说一下遇到的问题以及解决方案

场景：当我访问首页，验证时发现登录过期了返回了code 401，当我再次登录，访问首页时发现首页数据不加载了，如图：

那么，原因是什么呢

原因就是当你访问首页的时候，虽然被401状态拦截了，但他还是访问了home页，然后我们又设置了页面缓存，所以401状态下的home页面被缓存起来了，所以数据页拿不到，当我们再次登录页面时，因为页面已经缓存过了，所以就不再重新加载数据了

解决方案：既然是页面被缓存了，我们做一个清除缓存的方法就好，清除缓存有很多种方法，我采用的是其中一种，给各位借鉴一下

方法：利用vue的状态管理工具，给其配置一个key值

import { defineStore } from 'pinia'

const useStore = defineStore('Lightcampus',{
    state: () => ({ App_key: 0 }),
    actions: {
        Add_key() {
            this.App_key++
      }
    }
})


export default useStore

在根路由页面配置key

<script setup>
import useStore from './store';
const store = useStore();
</script>

<template>
  <!-- 视图路口 -->
  <router-view v-slot="{ Component }">
    <keep-alive include="AppGather" :key="store.App_key">
      <component :is="Component" />
    </keep-alive>
  </router-view>
</template>

在登录的时候更新key值

const { msg, code, token, data } = await ajax.post('/code_login', code_numbers);
if (code == 200) {
    showSuccessToast(msg);
    sessionStorage.setItem('user_token', token);
    sessionStorage.setItem('user_info', JSON.stringify(data[0]));
    router.push('/');
    store.Add_key();
} else {
    showFailToast(msg);
}

OK，如果出现了其他页面跟着滚动，请回到《滚动行为》章节下好好配置