Vue实现页面锚点至顶部

一、应用场景

在vue项目开发时，发现路由跳转之后，页面默认停留在当前浏览的位置，但是很多时候我们想要的是路由跳转之后，页面重新定位到顶部，下面介绍一下可以实现的方法。

二、方式一

在main.js 中添加代码：

router.afterEach((to, from, next) => {
  window.scrollTo(0, 0)
})

三、方式二

如果需要某个页面跳转回顶部，仅需要在当前页面（page）合适的位置加入一下代码即可：

// chrome
document.body.scrollTop = 0
// firefox
document.documentElement.scrollTop = 0
// safari
window.pageYOffset = 0

四、方式三

在路由index.js中，加入以下代码也可实现路由改变定位到顶部的效果，savedPosition当且仅当通过浏览器的前进/后退按钮触发时才可用，代码如下：

scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
        return savedPosition
    }
    return {
        x: 0,
        y: 0
    }
}

应用以上方法，会发现每次打开页面都是显示的是页面顶部内容，再也不会显示页面底部或者其他位置影响用户体验。

五、延伸阅读

在Vue项目中，使用ElementUI渲染表格数据时，如果某一个列数值长度超过列宽，会默认换行，造成显示不友好。

翻阅ElementUI文档，可发现show-overflow-tooltip列属性可实现列内容过长被隐藏时显示tooltip的功能。

注：show-overflow-tooltip属性需要谨慎使用，如果一个页面多列使用，会影响页面加载速度。因为show-overflow-tooltip 属性虽然可以解决文本超长时的问题，但当前是在所有的单元格中插入 tooltip 组件包装来简单实现的。

tooltip 组件使得 DOM 结构成倍增加，而且每个 tooltip 内部都有至少两个监听事件。这对大数据量表格来说性能是致命的。所以在中后台系统中大量数据的表格展示需要优化改进。

<el-table-column
          :show-overflow-tooltip="true"
          prop="EMAIL"
          label="电子邮件"
        >
</el-table-column>