在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.
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 ]
扫一扫
4051
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
