由于Vue路由默认是基于hash模式的,使用以往的a标签+id的模式会有问题
或路由使用history模式,可以解决这个问题,Vue官方HTML5 History 模式
使用history链接会更好看些,没有#号,不过需要后台配置支持
另一个办法就是使用scrollIntoView方法,文档参考:Element.scrollIntoView()
注意:这个方法当被调用的元素的父容器可以滚动时有效
// 使用方法
document.getElementById('id').scrollIntoView();
可以配合Vue的$refs使用,具体参数可以看文档去
// 通过$el可以获取dom元素
this.$refs.refName.$el.scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" })
// behavior: "smooth" 这个参数会有个滑动效果,不显得生硬
// block: "center" 到指定位置后dom元素在的位置 垂直方向,居中
// inline: "nearest" 到指定位置后dom元素在的位置 水平方向,默认
如果是刚生成的dom元素可以使用$nextTick确保元素存在再定位,以防出现undefined情况,
$nextTick:将回调延迟到下次dom更新循环之后执行,在修改数据之后立即使用它,然后等待dom更新。
用法:
this.$nextTick(() => {
this.$refs.refName.$el.scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" })
})