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

vue3利用哈希模式实现锚点导航

在vue.js应用中，实现哈希模式的锚点导航是一项常见而有用的功能。

通过哈希模式，我们可以在页面间快速跳转，而无需重新加载整个页面，这对于提升用户体验尤为重要。

本文将介绍如何在vue应用中利用哈希模式实现锚点导航，并且结合csdn的使用进行详细说明。

准备工作

首先，确保你的vue项目已经初始化，并且已经安装了vue router。

如果还没有安装vue router，你可以通过以下命令进行安装：

设置路由

在vue router中，我们需要将路由模式设置为哈希模式。

在创建vue router实例时，可以通过设置mode: 'hash'来启用哈希模式。

// 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>