vue3 多种方法的锚点定位

一花一world

已于 2023-07-16 17:05:51 修改

阅读量2.6k

点赞数 2

分类专栏：前端文章标签： vue.js javascript 前端

于 2023-07-16 17:02:25 首次发布

本文链接：https://blog.csdn.net/ACCPluzhiqi/article/details/131752291

版权

前端专栏收录该内容

178 篇文章 24 订阅

订阅专栏

在 Vue 3 中，可以通过多种方式实现锚点定位，包括使用原生的 JavaScript 方法和利用 Vue Router 提供的导航守卫等。下面我会分别介绍这些方法。

1. 使用原生 JavaScript 方法：

在 Vue 3 中，你可以使用 window.location.hash 属性来改变 URL 中的锚点，并通过 JavaScript 方法将页面滚动到对应的位置。下面是一个示例：

<template>
  <div>
    <ul>
      <li><a href="#section1" @click="scrollToAnchor">Section 1</a></li>
      <li><a href="#section2" @click="scrollToAnchor">Section 2</a></li>
      <li><a href="#section3" @click="scrollToAnchor">Section 3</a></li>
    </ul>

    <div id="section1">Section 1</div>
    <div id="section2">Section 2</div>
    <div id="section3">Section 3</div>
  </div>
</template>

<script>
export default {
  methods: {
    scrollToAnchor(event) {
      const href = event.target.getAttribute('href');
      window.location.hash = href;
      // 可以将滚动位置定制为合适的位置
      // const targetElement = document.querySelector(href);
      // window.scrollTo({ top: targetElement.offsetTop, behavior: 'smooth' });
    },
  },
};
</script>

在上面的示例中，我们使用了一个包含锚点链接的列表，并通过 @click 事件将点击的链接的 href 属性值设置为 window.location.hash，从而改变 URL 的锚点。如果需要滚动到对应位置，可以通过 JavaScript 方法获取目标元素，然后调用 window.scrollTo() 方法将页面滚动到目标位置。

2. 使用 Vue Router 导航守卫：

如果你在 Vue 3 项目中使用了 Vue Router，并且需要在导航时进行锚点定位，你可以利用 Vue Router 提供的导航守卫来实现。下面是一个示例：

<template>
  <div>
    <ul>
      <li><router-link to="#section1">Section 1</router-link></li>
      <li><router-link to="#section2">Section 2</router-link></li>
      <li><router-link to="#section3">Section 3</router-link></li>
    </ul>

    <div id="section1">Section 1</div>
    <div id="section2">Section 2</div>
    <div id="section3">Section 3</div>
  </div>
</template>

<script>
import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();

    router.beforeEach((to, from) => {
      if (to.hash) {
        const element = document.querySelector(to.hash);
        if (element) {
          element.scrollIntoView({ behavior: 'smooth' });
        }
      }
    });
  },
};
</script>

在上面的示例中，我们使用了 <router-link> 组件来生成链接，通过传递 to 属性设置锚点的值。然后，在导航守卫的 beforeEach 钩子中判断是否存在锚点，并使用 scrollIntoView() 方法将页面滚动到对应位置。

3.利用ref实现锚点定位

在 Vue 3 中，可以使用 ref 来实现锚点定位。ref 是一个响应式引用对象，可以用来引用 DOM 元素或其他数据。通过将 ref 与 scrollIntoView() 方法结合使用，可以实现锚点定位。下面是一个示例：

<template>
  <div>
    <ul>
      <li><a @click="scrollToAnchor(section1Ref)">Section 1</a></li>
      <li><a @click="scrollToAnchor(section2Ref)">Section 2</a></li>
      <li><a @click="scrollToAnchor(section3Ref)">Section 3</a></li>
    </ul>

    <div ref="section1Ref" id="section1">Section 1</div>
    <div ref="section2Ref" id="section2">Section 2</div>
    <div ref="section3Ref" id="section3">Section 3</div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const section1Ref = ref(null);
    const section2Ref = ref(null);
    const section3Ref = ref(null);

    const scrollToAnchor = (ref) => {
      if (ref.value) {
        ref.value.scrollIntoView({ behavior: 'smooth' });
      }
    };

    return {
      section1Ref,
      section2Ref,
      section3Ref,
      scrollToAnchor,
    };
  },
};
</script>

在上面的示例中，我们使用 ref 创建了三个引用对象 section1Ref、section2Ref 和 section3Ref，分别对应三个锚点的 DOM 元素。然后，通过点击链接时调用 scrollToAnchor() 方法，并传递对应的引用对象，来实现滚动到相应的锚点位置。

在 scrollToAnchor() 方法中，我们首先判断引用对象是否存在，然后调用 scrollIntoView() 方法将页面滚动到对应的锚点位置。

通过使用 ref 来实现锚点定位，可以更加方便地操作 DOM 元素，并实现灵活的锚点定位效果。

4.利用a标签实现锚点定位

使用 <a> 标签实现锚点定位是一种常见且简单的方法。你可以在 <a> 标签的 href 属性中设置锚点的 ID，然后通过点击链接来实现页面滚动到对应的锚点位置。下面是一个示例：

<template>
  <div>
    <ul>
      <li><a href="#section1">Section 1</a></li>
      <li><a href="#section2">Section 2</a></li>
      <li><a href="#section3">Section 3</a></li>
    </ul>

    <div id="section1">Section 1</div>
    <div id="section2">Section 2</div>
    <div id="section3">Section 3</div>
  </div>
</template>

在上面的示例中，我们使用 <a> 标签来生成链接，并在 href 属性中设置了对应的锚点 ID。当用户点击链接时，浏览器会自动滚动到对应的锚点位置。

这种方法非常简单，适用于基本的锚点定位需求。但需要注意的是，如果你的 Vue 3 项目使用了 Vue Router，并且使用了 router-link 组件来生成链接，那么应该使用 to 属性来设置锚点的值，而不是使用 <a> 标签的 href 属性。这样可以确保在使用 Vue Router 进行导航时，也能够正确地进行锚点定位。

无论选择哪种方式实现锚点定位，都可以根据具体的需求和场景来选择合适的方法。