vue项目实战--路由后置守卫afterEach解决页面滚动问题

问题描述

• 首页页面较长滚动了一定的位置，这时单击页面上的某个跳转按钮进行页面跳转，滚动条默认是上一个页面的停留的位置，影响用户体验。

解决问题

//路由配置文件 index.js 
router.afterEach((to, from, next) => {
  window.scrollTo(0, 0);
});

document.body.scrollTop = 0
document.documentElement.scrollTop =0

• 本人在后置路由守卫设置的完全没有效果。经过一系列的尝试比如组件销毁后设置滚动高度为零，组件内部的钩子函数获取dom将其滚动高度设置为零等等都没成功。
• 一下是成功解决问题的一种写法

// 根组件 app.vue 采用watch监听路由变化 直接获取根dom最终问题解决
watch: {
    $route: {
      handler: function(now, old) {
        document.getElementById('app').scrollTo(0,0)
        		// console.log(now.path);
        		},
        		deep: true,
        	}
        }