vue 路由切换回到顶部功能

[huangshuwei]

前言

vue 项目陆续上线了几个，也暴露了不少问题。今天记录的是如何在路由切换的时候，滚动条回到顶部。

分析

首先简单分析下，为什么路由切换会导致滚动条不会自动到顶部。多页应用每次点击菜单导航都会重新刷新整个页面，自然有滚动条时，也会回到顶部。而单页应用不同，每次点击菜单导航都会触发对应的路由局部更新，这样就可能出现了滚动条就无法回到顶部（内容高度不够也不会滚动条）。

路由 hash 模式滚动条回到顶部

路由是通过 hash 方式，没有太好的办法，目前我想到的办法简单粗暴，就是在路由改变的时候去让可能存在滚动条的内容强制回到顶部。

一般是路由改变对应的内容切换的区域会出现滚动条，我们给会出现滚动条的区域设置一个class 样式为scroll-content:

<div class="scroll-content">
      <router-view></router-view>
</div>

也有可能存在双滚动条，即页面结构是左右结构，左侧的菜单高度没有进行设置，会导致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 }
  }
})

我们还可以利用路由元信息更细颗粒度地控制滚动。查看完整例子请移步这里。

--完--