Vue3哈希模式實(shí)現(xiàn)錨點(diǎn)導(dǎo)航方式

更新時(shí)間：2024年04月28日 09:04:37 作者：小智學(xué)前端

這篇文章主要介紹了Vue3哈希模式實(shí)現(xiàn)錨點(diǎn)導(dǎo)航方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue3利用哈希模式實(shí)現(xiàn)錨點(diǎn)導(dǎo)航

在Vue.js應(yīng)用中，實(shí)現(xiàn)哈希模式的錨點(diǎn)導(dǎo)航是一項(xiàng)常見(jiàn)而有用的功能。

通過(guò)哈希模式，我們可以在頁(yè)面間快速跳轉(zhuǎn)，而無(wú)需重新加載整個(gè)頁(yè)面，這對(duì)于提升用戶(hù)體驗(yàn)尤為重要。

本文將介紹如何在Vue應(yīng)用中利用哈希模式實(shí)現(xiàn)錨點(diǎn)導(dǎo)航，并且結(jié)合CSDN的使用進(jìn)行詳細(xì)說(shuō)明。

準(zhǔn)備工作

首先，確保你的Vue項(xiàng)目已經(jīng)初始化，并且已經(jīng)安裝了Vue Router。

如果還沒(méi)有安裝Vue Router，你可以通過(guò)以下命令進(jìn)行安裝：

設(shè)置路由

在Vue Router中，我們需要將路由模式設(shè)置為哈希模式。

在創(chuàng)建Vue Router實(shí)例時(shí)，可以通過(guò)設(shè)置mode: 'hash'來(lái)啟用哈希模式。

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