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

2021-11-13 1184点热度 0人点赞 0条评论

问题描述

默认情况下,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

 

admin

这个人很懒,什么都没留下

文章评论

您需要 登录 之后才可以评论