vue3 - 41.router.11 - 路由滚动行为

当我们创建router实例的时候，router会提供一个scrollBehavior函数，并且返回三个函数，分别是，to，from，savePosition，其中savePosition就是用来标注页面滚动距离的

用 scrollBehavior 来实现，当我们在页面中滚动的时候，这个时候我们切换新页面，在返回的时候，可以记住当前我们滚动的位置距离：

案例：

router/index.ts:

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";

const routes:Array<RouteRecordRaw> = [
    {
        path:'/',
        component:() => import('../views/login/index.vue')
    },
    {
        path:'/index',
        component:() => import('../views/index/index.vue')
    }
]
const router = createRouter({
    history:createWebHistory(),
    scrollBehavior:(to,from,savePosition) => {
        console.log(savePosition)
        if(savePosition){
            return savePosition
        } else {
            return {
                top:0
            }
        }
    },
    routes
})
export default router

我们也可以直接指定页面滚动距离：

const router = createRouter({
    history:createWebHistory(),
    scrollBehavior:(to,from,savePosition) => {
        return {
            top:300
            // bottom:0
        }
    },
    routes
})