Vue 跨页面#锚链接跳转

最新推荐文章于 2024-07-11 15:03:42 发布

zlting~

最新推荐文章于 2024-07-11 15:03:42 发布

阅读量347

点赞数 1

CC 4.0 BY-SA版权

分类专栏： VUE 文章标签： vue javascript

本文链接：https://blog.youkuaiyun.com/sunshineTing2/article/details/114982822

VUE 专栏收录该内容

116 篇文章

订阅专栏

本文介绍如何在前端开发中使用锚点进行页面内导航。通过在home页面设置锚链接，并在目标页面设置对应的ID，结合JavaScript实现页面滚动到指定位置的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

从`home`页面 -链接- `list`页面

第一步：在home页面`用a标签设置锚链接`

<!-- home.vue-->
<a href="/list#Scientists">跳去列表页 科学家</a>
<a href="/list#Innovators">跳去列表页 创新者</a>

第二步：在list页面`设置id属性`

<!-- list.vue-->
<p id="Scientists">
      列表页科学家内容
      ...
</p>
<p id="Scientists">
      列表页创新者内容
      ...
</p>

第三步：判断当前页面的 `window.location.hash`（`标签值`），如果有就执行方法`goAnchor()`滚动到元素位置


mounted() {
	/** 判断当前页面的标签值，如果有就执行方法*/
    if (window.location.hash) {
      this.$nextTick(() => {
        this.goAnchor(window.location.hash);
      });
    }
  },
methods: {
	/** 页面滚动到元素位置 */
    goAnchor (selector) {
      let anchor = this.$el.querySelector(selector)
      document.body.scrollTop = anchor.offsetTop; // chrome
      document.documentElement.scrollTop = anchor.offsetTop; // firefox
    },
}