vue 组件的 scrollBehavior

一、浏览器对用户访问网页的记录

二、vue 对访问记录的管理

vue 路由跳转通过对 history,pushState() 和 history.replaceState() 放的模拟来实现的，会往 history 栈中存放一条记录。当调用 router.go() 或者 router.back() 方法时，就和 history.go()、history.back() 效果一样。

三、vue 组件滚动行为

使用 tab 组件进行路由切换，同时对应的子组件重新进行渲染，而不是保存历史滚动的位置信息。

四、如何管理组件的滚动行为

每次切换组件时，让页面回到顶部，router.beforeEach() 导航守卫会是一个不错的选择，当然我们也可以使用 router.afterEach() 导航守卫：

router.afterEach(() => {
    // 让页面回到顶部
    document.documentElement.scrollTop = 0
})

五、定制不同组件的 scrollBehavior

我们借助 vue-router 提供的 scrollBehavior 来管理组件的滚动行为，可以在组件切换时，回到顶部。

const scrollBehavior = function (to, from, savedPosition) {
    // savedPosition 会在你使用浏览器前进或后退按钮时候生效
    // 这个跟你使用 router.go() 或 router.back() 效果一致
    if (savedPosition) {
        return savedPosition
      } else {
        // 如果不是通过上述行为切换组件，就会让页面回到顶部
        return {x: 0, y: 0}
    }
}

这里用路由的元信息 meta 来控制滚动行为。

const routes = [
    // 设置 meta，细颗粒控制组件滚动
    {path: '/', component: Home, meta: {x: 0, y: 0}},
    {path: '/list', component: List, meta: {x: 0, y: 0}},
    {path: '/about', component: About, meta: {x: 0, y: 0}}
]
const scrollBehavior = function (to, from, savedPosition) {
    return to.meta
}
const router = new VueRouter({
    routes,
    scrollBehavior,
    linkExactActiveClass: 'current'
})

在 vue 中全局监听滚动事件(绑定到 vue 根实例上)，因为 this 会自动绑定到当前上下文：

new Vue({
    router,
    data: {
        timerId: ''
    },
    mounted () {
        window.addEventListener('scroll', this.justifyPos)
    },
    methods: {
        justifyPos () {
            if (this.timerId) clearTimeout(this.timerId)
            this.timerId = setTimeout(() => {
                this.$route.meta.y = window.pageYOffset
            }, 300)
        }
    }
}).$mount('#app')