欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue解决跳转时新页面没有置顶

程序员文章站 2024-02-14 16:01:22
...
一.Vue页面跳转后当前位置不在顶部的解决办法(两种办法)

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

// 跳转后返回顶部
 router.afterEach((to,from,next) => {
      window.scrollTo(0,0);
 })
//或者
router.beforeEach((to, from, next) => {    
    // chrome
    document.body.scrollTop = 0
    // firefox
    document.documentElement.scrollTop = 0
    // safari
    window.pageYOffset = 0
    next()
})

2.在路由的index.js中,添加如下代码:

scrollBehavior(to, from,savedPosition) {
	//if判断可加可不加、根据自己需求
	//savedPosition当且仅当通过浏览器的前进/后退按钮触发时才可用
   	if (savedPosition) {
        return savedPosition
    }
    return {
      x: 0,
      y: 0
    }
  }
相关标签: vue vue.js