vue3 多种方法的锚点定位

1. 使用原生JavaScript方法：

可以使用 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 setup>
const 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 导航守卫：

<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 setup>
import { useRouter } from 'vue-router';

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实现锚点定位

3.1 设置动态ref

<div :ref="($event)=>setRef($event)">有效ref</div>

<script setup>
import { ref } from "vue";
const divRef= ref();
const setRef = (e) => {
	divRef.value=e
}

</script>

3.2 使用

<template>
<div>
    <div
       v-for="(item, index) in videoData.videoListVos"
       :key="index"
       :id="'video' + index"
       :ref="setRef"
        style="width: 100%;"
      > 
     {{item}}
    </div>
      <div
         v-for="(item, index) in videoData.videoListVos"
         :key="index"
         @click="scrollToVideo(index)"
         >{{index}}</div>
</div>
</div>
</template>
<script>
const eleRefs = ref([]); //动态ref
const setRef = (el) => {
   if (el) {
     eleRefs.value.push(el);
  }
};
const scrollToVideo = (selector) => {
  if (eleRefs.value[selector]) {
    eleRefs.value[selector].scrollIntoView({
      block: "start",
      behavior: "smooth",
    });
  }
}
</script>

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

<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。点击链接时，浏览器会自动滚动到对应的锚点位置。