vue跨页面跳转锚点

在Vue中实现跨页面跳转锚点有两种方法。第一种是非跨页面的锚点跳转，可以在标签中使用JavaScript方法实现。例如，在组件A中，可以使用以下代码实现跳转到组件B的指定位置的锚点：

<div class="content">
  <a href="javascript:void(0)" @click="goAnchor()">gotoOther</a>
</div>

然后，在组件A的methods中添加goAnchor方法：

methods: {
  goAnchor() {
    var anchor = this.$el.querySelector("#锚点的id或name值")
    document.body.scrollTop = anchor.offsetTop
  }
}

第二种方法是跨页面的锚点跳转，可以使用路由来实现。在组件A中，可以使用以下代码实现跳转到组件B的指定位置的锚点：

<div class="content">
  <a href="/b组件路由#锚点的id或name值">gotoOther</a>
</div>

需要注意的是，需要将跳转目标的路由和锚点的id或name值组合在一起。

在组件B中，需要设置对应的锚点位置。例如：

<div class="content-modal" id="c">
  // 设置id ccc
</div>
<div class="content-modal" id="d">
 // 设置id ddd
</div>
<div class="content-modal" id="e">
  // 设置id eee
</div>
<div class="content-modal" id="f">
  // 设置id fff
</div>

为了在组件B加载时自动滚动到指定的锚点位置，可以在mounted钩子函数中添加以下代码：

mounted() {
  if (window.location.hash) {
    this.goAnchor(window.location.hash)
  }
},
methods: {
  goAnchor(selector) {
    setTimeout(() => {
      // 获取锚点元素
      const anchor = this.$el.querySelector(selector)
      anchor.scrollIntoView()
    }, 500)
  }
}

这样，在组件B加载时，如果URL中包含锚点信息，页面会自动滚动到对应的锚点位置。

请根据你的需求选择合适的方法来实现Vue跨页面跳转锚点。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [vue 实现跨页面锚点跳转](https://blog.csdn.net/yimaode/article/details/104649672)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *3* [VUE—跨页面锚点（nuxt同样适用）](https://blog.csdn.net/Poppy_LYT/article/details/119995904)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]