【Vue】Vue中使用锚点链接

由于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" })
})