Vue.JS下页面每次路由改变后滚动到最顶上实现

问题描述

默认情况下，Vue项目下的页面router.push('/path/to/page')每次路由切换后，如果当前页面已经滚动到中间或者底部的时候，跳到下一个页面，默认也是scoll到相同的位置（中间或者底部），但是我们还是希望到了新页面，当前内容还是滚动到顶端。

这个应该是其他SAP（Single Page Applications ）都差不多会遇到的问题。

解决方案

• 在每个页面的生命周期mounted下面，写代码让页面滚动到顶部

mounted () {
  window.scrollTo(0, 0);//滚动页面到最顶端
}

• 以上在每个页面都需要写代码，会比较麻烦，我们还可以在路由的代码中，监听页面切换时候，执行滚动到顶部的操作

在router/index.js里面，在export default router上面增加如下代码：

router.beforeEach((to, from, next) => {
    window.scrollTo(0, 0);//滚动页面到最顶端

    next();
});

export default router

当然你也可以根据某些条件来判断是否需要滚动到最顶端，例如给router增加meta：

const routes = [
    {
        path: '/',
        name: 'Home',
        component: () => import('../views/Home')
    },
    {
        path: '/another-page',
        name: 'AnotherPage',
        component: () => import('../views/AnotherPage.vue'),
        // scrollToTop 是否滚动到最顶端
        meta: {scrollToTop: true}
    },
]

const router = new VueRouter({
    routes
});

router.beforeEach((to, from, next) => {
    let scrollToTop = to.meta.scrollToTop;
    if (scrollToTop) {
        window.scrollTo(0, 0);
    }
    next();
});

export default router