1.在router文件里面的index.ts给要缓存的组件设置meta,设置keepAlive属性,属性值为true
{
path: '/usedcar',
name: 'usedcar',
component: () => import('../views/usedCar/index.vue'),
meta: {
keepAlive: true //需要缓存
}
},
2.使用keep-alive标签包裹要缓存的组件,
判断哪个组件需要缓存 (注意Component中的C要大写)
<template>
<!-- vue3.0配置 keep-alive-->
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" v-if="$route.meta.keepAlive"/>
</keep-alive>
<component :is="Component" v-if="!$route.meta.keepAlive"/>
</router-view>
</template>
3. 在点击跳转到详情页面时候,使用缓存组件特有的钩子onBeforeRouteLeave将滚动的值(scrollTop)保存起来。再次返回列表页的时候会触发activated(也是缓存组件特有的钩子)来把在onBeforeRouteLeave中存储的滚动值赋值给滚动的盒子
首先引入onActivated, onBeforeRouteLeave
import {onActivated} from 'vue'
import { onBeforeRouteLeave} from "vue-router"
代码实现
// 跳转路由守卫
onBeforeRouteLeave((to, from, next) => {
// 将当前位置进行一个保存
cars.remeberScroll = document.documentElement.scrollTop
next()
})
// 组件激活
onActivated(() => {
document.documentElement.scrollTop = cars.remeberScroll
})