在Vue中实现跨
页面跳转锚点有两种方法。第一种是非跨
页面的
锚点跳转，可以在标签中使用JavaScript方法实现。例如，在组件A中，可以使用以下代码实现
跳转到组件B的
指定位置的
锚点：
```html
<div class="content">
<a href="javascript:void(0)" @click="goAnchor()">gotoOther</a>
</div>
```
然后，在组件A的methods中添加goAnchor方法：
```javascript
methods: {
goAnchor() {
var anchor = this.$el.querySelector("#
锚点的id或name值")
document.body.scrollTop = anchor.offsetTop
}
}
```
第二种方法是跨
页面的
锚点跳转，可以使用路由来实现。在组件A中，可以使用以下代码实现
跳转到组件B的
指定位置的
锚点：
```html
<div class="content">
<a href="/b组件路由#
锚点的id或name值">gotoOther</a>
</div>
```
需要注意的是，需要将
跳转目标的路由和
锚点的id或name值组合在一起。
在组件B中，需要设置对应的
锚点位置。例如：
```html
<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钩子函数中添加以下代码：
```javascript
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.youkuaiyun.com/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.youkuaiyun.com/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 ]
本文介绍如何在A页面通过导航代码实现跳转到B页面的特定锚点，详细讲解了页面A.html中用于跳转到B.html指定楼层的锚链接操作。
最低0.47元/天 解锁文章
扫一扫
893
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
