vue 跳转页面?在做vue项目开发时,发现路由跳转之后,页面默认停留在当前浏览的位置,但是很多时候我们想要的是路由跳转之后,页面重新定位到顶部,下面介绍一下可以实现的方法,下面我们就来说一说关于vue 跳转页面?我们一起去了解并探讨一下这个问题吧!
vue 跳转页面
应用场景在做vue项目开发时,发现路由跳转之后,页面默认停留在当前浏览的位置,但是很多时候我们想要的是路由跳转之后,页面重新定位到顶部,下面介绍一下可以实现的方法。
方式一 导航钩子-router.afterEach在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
}
}
应用以上方法,会发现每次打开页面都是显示的是页面顶部内容,再也不会显示页面底部或者其他位置影响用户体验。
拓展阅读 show-overflow-tooltip实现表格列内容过长显示提示在Vue项目中,使用ElementUI显示表格数据时,如果某一个列数值长度超过列宽,会默认换行,造成显示不友好。
翻阅Element-UI文档,可发现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>