vue-router跳转详情页后，页面内组件滚动条不置顶

 

页面main内滚动条不置顶时，点击页面内详情按钮，页面跳转，滚动条保留跳转前位置，需求是要置顶。

当时第一反应就是在路由的文件的全局前置路由守卫写个window.scrollTo(0, 0);但是发现不起作用，然后发现滚动条不是页面内的滚动条，而是main组件内的滚动条，所以页面滚动条置顶是不对的。

main组件内滚动条的话就需要找到该组件的文件，公司的main组件放在main.vue文件里，然后在mounted里面写以下内容

document.getElementsByClassName("single-con")[0].scrollTop = 0; // 设置滚动条位置

发现还是没有置顶，后来多次用log做标记进行页面跳转，才发现写错方法位置，需要写在监听路由里面，因为跳转详情页时页面没有刷新，所以content页面里面的mounted方法只会调用一次，在点击详情的时候方法不会执行。所以需要写在watch监听里面去监听路由跳转。其实是很简单的一个逻辑，但是没能快速发现滚动条所处的位置以及书写置顶方法的位置，错误的把精力放在了路由守卫的书写滚动条置顶方法，浪费很多时间。还是需要多些思考，而不是咔咔一顿写啊。

 watch: {
        $route(to) {
        document.getElementsByClassName("single-con")[0].scrollTop = 0; // 设置滚动条位置;
           }
        }