进入页面跳转到指定锚点

2024年3月10日 128次阅读 来源: 俱沫

问题

在Vue实例完成之后，将锚点定位到指定元素。

分析：

如何实现，这是一个问题。首先生命周期函数，放在created钩子中，这个时候页面还没有渲染完成，如果进行锚点跳转，很可能就无法跳转到指定位置。因此只能放在生命周期钩子mounted中。

但是，如果直接使用location.hash也是有可能无法正常跳转，因此，要保证正常跳转，就要把跳转锚点的代码放在事件队列的最好，这个时候就要使用setTimeout(() => {}, 0)了。

解决方案：

  1. 在生命周期钩子mounted写代码
  2. 将跳转锚点的代码放在事件队列的最后

代码实现

  var vm = new Vue({
    el: '#app',
    mounted() {
      setTimeout(function () {
        location.hash = 'item4'
      }, 0)
    }
  })
    原文作者：俱沫
    原文地址: https://segmentfault.com/a/1190000011487940
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞