vue3中将页面缓存起来，详情页面跳转回来，将滚动条设置到指定位置

1.将router-view改造一下,如果有layout，则将layout的router-view改成下面这样，include包含的是要缓存的组件名，app.vue的router-view不做任何操作

<router-view v-slot="{ Component, route }">
    <keep-alive :include="['PlayBack', 'LiveBroadcast']">
        component :is="Component" :key="route.path" />
    </keep-alive>
</router-view>

2.在onBeforeRouteLeave钩子函数中将当前离开时的页面距离记录下来

// 记录离开时导航条的位置
let scrollY = ref();

// 离开路由时的钩子函数
onBeforeRouteLeave((to, from, next) => {
    // 记录当前的滚动条位置
    scrollY.value =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
    next();
});

3.在onActivated钩子函数中将当前页面的滚动条位置设置为之前保存的距离

注意：千万别写下面的这种写法

onActivated(() => {
    nextTick(() => {
        window.scroll(0, scrollY.value);
    })
});

要改成下面的这种写法（在页面完成加载完在.then里面执行）

onActivated(() => {
    nextTick(() => {}).then(() => {
        window.scroll(0, scrollY.value);
    });
});