Vue3哈希模式实现锚点导航方式
作者：小智学前端
这篇文章主要介绍了Vue3哈希模式实现锚点导航方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
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>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。