vue3 hash模式下如何实现锚点链接

1.router.js

import * as VueRouter from "vue-router";

const routes = [

  {

    path: "/",

    component: () => import("../view/home.vue"),

  },

  {

    path: "/Stake",

    name: "Stake",

    component: () => import("../view/staking.vue"),

  },

  {

    path: "/Airdrop",

    name: "Airdrop",

    component: () => import("../view/airdrop.vue"),

  },

];

const router = VueRouter.createRouter({

  history: VueRouter.createWebHashHistory(),

  routes,

  scrollBehavior(to) {

    if (to.hash) {

      const element = document.querySelector(to.hash);

      if (element) {

        element.scrollIntoView({ behavior: "smooth" });

        return false; // 阻止默认的滚动行为

      }

    }

    return { top: 0 }; // 默认滚动到页面顶部

  },

});

export default router;

2.app.vue

          <div class="yheade flex">

            <router-link :to="{ path: '/', hash: '#xShareBot' }"

              >xShareBot</router-link

            >

            <router-link :to="{ path: '/', hash: '#MevBot' }"

              >MevBot</router-link

            >

            <router-link :to="{ path: '/', hash: '#Tokennomics' }"

              >Tokennomics</router-link

            >

            <router-link :to="{ path: '/', hash: '#Roadmap' }"

              >Roadmap</router-link

            >

            <a href="#">Docs</a>

            <router-link to="/Stake">Stake</router-link>

            <router-link to="/Airdrop">AIRDROP</router-link>

          </div>

3.组件模块以id命名

按照这样的步骤就可以实现vue3在hash模式下实现跳转页面的同时实现a标签的锚点链接跳转