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

V

ue页面跳转后当前位置不在顶部的解决办法(几种办法)

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
    }
  }

3，解决：在配置路由时候 加上：scrollBehavior:() => ({ y = 0 }),

const router = new VueRouter({
		  scrollBehavior: () => ({ y: 0 }),
		  routes: [ ]
})

原因：使用组件缓存时 再次切换到此组件 路由不触发mounted钩子函数 （不知理解对与否，欢迎指正。）
额外

但是是还有个问题依旧没有彻底克服！
比如，如果当前页面是首页，点击页面中的"首页"选项后，却依然不置顶，那么只能老老实实的增加个回到顶部了。

 toYpWebsite () {
      // this.$router.push('/ypWebsite')
      document.body.scrollTop = document.documentElement.scrollTop = 0