vue3锚点定位多种方法详解

更新时间：2024年01月21日 09:25:34 作者：赵啸林

这篇文章主要介绍了vue3的锚点定位多种方法,需要的朋友可以参考下

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

1. 使用原生 JavaScript 方法：

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

<template>
  <div>
    <ul>
      <li><a href="#section1" rel="external nofollow"  rel="external nofollow"  @click="scrollToAnchor">Section 1</a></li>
      <li><a href="#section2" rel="external nofollow"  rel="external nofollow"  @click="scrollToAnchor">Section 2</a></li>
      <li><a href="#section3" rel="external nofollow"  rel="external nofollow"  @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>

上面的示例中，我们使用了组件来生成链接，通过传递 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，然后通过点击链接来实现页面滚动到对应的锚点位置。下面是一个示例：
在上面的示例中，我们使用 < a > 标签来生成链接，并在 href 属性中设置了对应的锚点 ID。当用户点击链接时，浏览器会自动滚动到对应的锚点位置。

<template>
  <div>
    <ul>
      <li><a href="#section1" rel="external nofollow"  rel="external nofollow"  class="section1">Section 1</a></li>
      <li><a href="#section2" rel="external nofollow"  rel="external nofollow"  class="section2">Section 2</a></li>
      <li><a href="#section3" rel="external nofollow"  rel="external nofollow"  class="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>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
const insertLink = val => {
  let a = document.createElement("a");
  let href = val;
  a.setAttribute("href", href);
  a.setAttribute("target", "_blank");
  a.setAttribute("id", "startTelMedicine");
  a.onclick = function () {
    //关闭窗口的方法
    window.opener = null;
    window.open("", "_self", "");
    window.close();
  };
  // 防止反复添加
  if (document.getElementById("startTelMedicine")) {
    document.body.removeChild(document.getElementById("startTelMedicine"));
  }
  document.body.appendChild(a);
  a.click();
};
$('a').on('click', function () {
    //insertLink(document.querySelector("a").getAttribute("href"));
    insertLink("#" + event.target.className);
});

</script>

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

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

不同方法的优缺点：

使用 ref 实现锚点定位：
优点：
可以更加灵活地操作 DOM 元素。
可以在 JavaScript 中对滚动行为进行更多的自定义设置。
缺点：
需要手动创建和管理 ref 引用对象。
使用 < a > 标签实现锚点定位：
优点：
简单直观，不需要额外的 JavaScript 代码。
浏览器会自动处理滚动行为。
缺点：
对滚动行为的自定义能力有限。(scroll-behavior: smooth)
需要在 href 或 to 属性中设置锚点的值。
综上所述，使用 ref 实现锚点定位可以提供更多的灵活性和自定义能力，适用于需要更复杂滚动行为或对 DOM 元素进行其他操作的场景。而使用 < a > 标签实现锚点定位则更加简单直观，适用于基本的锚点定位需求。

使用原生 JavaScript 方法实现锚点定位：
优点：

简单直接：使用原生 JavaScript 方法可以直接操作 DOM 元素，不需要额外的依赖或库。
灵活性高：可以自定义滚动行为、动画效果等，根据需求进行定制。
缺点：

需要手动编写和管理 JavaScript 代码，相对于其他方法可能需要更多的工作量。
兼容性问题：不同浏览器对于一些滚动行为的实现可能有差异，需要进行兼容性处理。
可维护性差：如果页面中有大量的锚点定位，或者需要频繁修改和维护，可能会导致代码复杂和难以维护。
综上所述，使用原生 JavaScript 方法实现锚点定位可以提供更高的灵活性和自定义能力，但需要更多的编码工作，并且需要注意兼容性和可维护性的问题。对于简单的锚点定位需求，使用原生 JavaScript 方法可能会显得繁琐，可以考虑使用其他简化的方法。

使用 Vue Router 导航守卫：
优点：

简化导航逻辑：导航守卫可以帮助你在路由跳转之前、之后或者在路由更新时执行相应的逻辑，从而简化导航的处理。
统一管理导航逻辑：通过导航守卫，你可以将导航逻辑集中在一个地方进行管理，提高代码的可维护性和可读性。
可以进行权限控制：导航守卫可以用来进行权限验证，例如在用户未登录时拦截某些页面的访问。
缺点：

需要学习和理解导航守卫的概念和使用方法，对于初学者可能需要一定的学习成本。
需要手动编写和管理导航守卫的逻辑，可能会增加代码量和复杂度。
导航守卫只能在前端进行验证，不能完全保证数据的安全性，后端仍然需要进行相应的验证和控制。
综上所述，使用 Vue Router 导航守卫可以简化导航逻辑、统一管理导航逻辑和进行权限控制，但需要学习和理解相关概念，并且需要手动编写和管理导航守卫的逻辑。根据具体的需求和项目的规模，可以权衡使用导航守卫的优缺点来决定是否使用。

到此这篇关于vue3锚点定位多种方法详解的文章就介绍到这了,更多相关vue3锚点定位多种方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue3中轻松实现switch功能组件的全过程
这篇文章主要给大家介绍了关于vue3中轻松实现switch功能组件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-01-01
vue项目首屏加载时间优化实战
单页面应用的一个问题就是首页加载东西过多，加载时间过长。特别在移动端，单页面应用的首屏加载优化更是绕不开的话题，这篇文章主要介绍了vue项目首屏加载时间优化实战，感兴趣的小伙伴们可以参考一下
2019-04-04
vuex数据持久化的两种实现方案
在vuex的时候刷新以后里面存储的state就会被浏览器释放掉,因为我们的state都是存储在内存中的,所以一刷新页面就会把state中的数据重置,这就涉及到vue数据持久化的问题,这篇文章主要给大家介绍了关于vuex数据持久化的两种实现方案,需要的朋友可以参考下
2021-07-07
超级详细的Vue安装与配置教程
Vue web前端三大主流框架之一,是一套用于构建用户界面的渐进式框架,下面这篇文章主要给大家介绍了关于Vue安装与配置教程的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
2022-06-06
vue实现三级导航展示和隐藏
这篇文章主要为大家详细介绍了vue实现三级导航展示和隐藏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
Vue监听属性图文实例详解
监听属性可以针对某个属性进行监听,当监听的属性的值发生了变化,则会执行相应的函数,下面这篇文章主要给大家介绍了关于Vue监听属性的相关资料,需要的朋友可以参考下
2021-11-11
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
这篇文章主要介绍了vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定的相关知识，本文通过实例代码相结合的形式给大家介绍的非常详细 ,需要的朋友可以参考下
2018-09-09
vue element-ui使用required进行表单校验时自定义提示语问题
这篇文章主要介绍了vue element-ui使用required进行表单校验时自定义提示语问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
Vue分别运用class绑定和style绑定通过点击实现样式切换
这篇文章主要为大家介绍了Vue分别运用class绑定和style绑定通过点击实现样式切换，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-07-07
vue.js实现请求数据的方法示例
这篇文章主要给大家介绍了vue.js实现请求数据的方法示例，文中分别介绍了vue1.0和vue2.0的示例方法，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-02-02