实现场景
相信很多小伙伴在写商城类项目时都会遇到的问题:
当我进入商品(或其他东西)的详情页,需要返回原先页面,发现原先页面刷新回到顶部了,并没有返回到原先的位置,这种体验感是非常差的!
下面我来利用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,如果出现了其他页面跟着滚动,请回到《滚动行为》章节下好好配置