Vue-router 路由跳转之后,页面默认停留在当前浏览的位置,

想要的是路由跳转之后,页面重新定位到顶部,

1.下面介绍一下可以实现的方法:

在理由配置文件中,添加以下代码即可

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'
Vue.use(VueRouter);

let router = new VueRouter({
    routes
});

//要添加的代码
router.beforeEach((to, from, next) => {
    // chrome
    document.body.scrollTop = 0
    // firefox
    document.documentElement.scrollTop = 0
    // safari
    window.pageYOffset = 0
    next()
})

export default router;

或 在main.js中添加如下代码:

router.beforeEach((to, from, next) => {    
    // chrome
    document.body.scrollTop = 0
    // firefox
    document.documentElement.scrollTop = 0
    // safari
    window.pageYOffset = 0
    next()
})

2. 或

 router.afterEach((to,from,next) => {
      window.scrollTo(0,0);
 })

 

Logo

前往低代码交流专区

更多推荐