前言
vue 项目陆续上线了几个，也暴露了不少问题。今天记录的是如何在路由切换的时候，滚动条回到顶部。
分析
首先简单分析下，为什么路由切换会导致滚动条不会自动到顶部。多页应用每次点击菜单导航都会重新刷新整个页面，自然有滚动条时，也会回到顶部。而单页应用不同，每次点击菜单导航都会触发对应的路由局部更新，这样就可能出现了滚动条就无法回到顶部(内容高度不够也不会有滚条)。
路由 hash 模式滚动条回到顶部
路由是通过 hash 方式，没有太好的办法，目前我想到的办法简单粗暴，就是在路由改变的时候去让可能存在滚动条的内容强制回到顶部。
一般是路由改变对应的内容切换的区域会出现滚动条，我们给会出现滚动条的区域设置一个class 样式为scroll-content:
也有可能存在双滚动条，即页面结构是左右结构，左侧的菜单高度没有进行设置，会导致body 存在滚动条，路由改变对应的内容区域也会出现滚动条。这一般是你要优化的，这样页面毕竟不好看。
方案1：
我们在 vue 项目的入口文件的路由改变中做处理
watch:{
$route(to, from) {
let scrollContent = document.querySelector(‘.scroll-content’);
if (scrollContent){
scrollContent.scrollTop = 0;
scrollContent.scrollLeft = 0;
}
}
}
方案2：
在路由的全局后置钩子中做处理也是一样的
router.afterEach((to, from) => {
let scrollContent = document.querySelector(‘.scroll-content’);
if (scrollContent){
scrollContent.scrollTop = 0;
scrollContent.scrollLeft = 0;
}
})
路由 history 模式滚动条回到顶部
vue 路由如何配置 history 模式请参考这篇文章
既然已经配置好了history 模式，vue-router 官网提供了滚动行为
配置如下：
const router = new VueRouter({
routes: […],
scrollBehavior (to, from, savedPosition) {
// 路由切换，简单的让页面滚动到顶部
return { x: 0, y: 0 }
}
})
我们还可以利用路由元信息更细颗粒度地控制滚动。查看完整例子请移步这里。
–完–