在React和Vue中实现锚点定位功能

在React和Vue中实现锚点定位功能，可以通过编程式导航或者使用<a>标签的href属性。以下是两种框架的简要示例：

React 示例:

import React from 'react';
 
function scrollToAnchor(anchorName) {
  if (anchorName) {
    // 使用React的refs访问DOM元素
    const anchorElement = React.createRef();
    // 在组件挂载后执行滚动
    React.useEffect(() => {
      window.scrollTo({
        top: anchorElement.current.offsetTop,
        behavior: 'smooth',
      });
    }, []);
    // 返回一个div元素，其ref指向对应的锚点
    return <div ref={anchorElement} style={{paddingTop: '100vh'}} />;
  }
  return null;
}
 
function App() {
  return (
    <div>
      {scrollToAnchor('anchor1')}
      {scrollToAnchor('anchor2')}
      {/* 其他内容 */}
    </div>
  );
}
 
export default App;

Vue 示例:

<template>
  <div>
    <div :ref="anchor1" style="padding-top: 100vh;"></div>
    <div :ref="anchor2" style="padding-top: 100vh;"></div>
    <!-- 其他内容 -->
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      anchor1: null,
      anchor2: null
    };
  },
  mounted() {
    this.$nextTick(() => {
      // 滚动到对应的锚点
      window.scrollTo({
        top: this.anchor1.$el.offsetTop,
        behavior: 'smooth'
      });
    });
  }
};
</script>

在React中，我们使用React.createRef()创建引用，并在组件挂载后使用window.scrollTo滚动到对应的锚点。在Vue中，我们使用:ref绑定来创建引用，并在mounted钩子中执行滚动操作。这两种框架都使用了平滑滚动(smooth)的选项，提供了更好的用户体验。