Vue3哈希模式实现锚点导航方式

// router/index.js

import { createRouter, createWebHashHistory,  RouteRecordRaw } from "vue-router";

export const routes: Array<RouteRecordRaw> = [
	...
]

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export default router;

<script setup lang="ts">
const scrollToAnchor = (data: string) => {
  // 从完整路径中解析出真正的锚点部分
  const hash = data; // 注意：根据你的URL结构调整索引
  if (hash) {
    const element = document.getElementById(hash);
    if (element) {
      element.scrollIntoView({ behavior: "smooth" });
    }
  }
};

const onLiclick = (event: any) => {
  scrollToAnchor(event.target.dataset.hash);
};
</script>

<template>
  <div>
    <nav>
      <ul @click="onLiclick">
        <li data-hash="my-box">首页</li>
        <li data-hash="chanpin-box">产品介绍</li>
        <li data-hash="news-box">实时新闻</li>
        <li data-hash="about-box">关于我们</li>
        <li data-hash="lianxi-box">联系我们</li>
      </ul>
    </nav>
    <div class="pages">
      <div id="my-box">
        <h1>我的</h1>
      </div>
      <div id="chanpin-box">
        <h1>产品介绍</h1>
      </div>
      <div id="news-box">
        <h1>实时新闻</h1>
      </div>
      <div id="about-box">
        <h1>关于我们</h1>
      </div>
      <div id="lianxi-box">
        <h1>联系我们</h1>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
ul {
  display: flex;
  position: fixed;
  z-index: 999;
  margin: auto;
  left: 50%;
  li {
    cursor: pointer;
    padding: 10px 20px;
  }
}
h1 {
  margin: 0px;
}
</style>