// 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) => {
  // 從完整路徑中解析出真正的錨點(diǎn)部分
  const hash = data; // 注意：根據(jù)你的URL結(jié)構(gòu)調(diào)整索引
  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">首頁(yè)</li>
        <li data-hash="chanpin-box">產(chǎn)品介紹</li>
        <li data-hash="news-box">實(shí)時(shí)新聞</li>
        <li data-hash="about-box">關(guān)于我們</li>
        <li data-hash="lianxi-box">聯(lián)系我們</li>
      </ul>
    </nav>
    <div class="pages">
      <div id="my-box">
        <h1>我的</h1>
      </div>
      <div id="chanpin-box">
        <h1>產(chǎn)品介紹</h1>
      </div>
      <div id="news-box">
        <h1>實(shí)時(shí)新聞</h1>
      </div>
      <div id="about-box">
        <h1>關(guān)于我們</h1>
      </div>
      <div id="lianxi-box">
        <h1>聯(lián)系我們</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>