vue3实现自定义导航菜单的示例代码
作者：搏博
一、创建项目
1. 打开HBuilder X
2. 新建一个空项目
文件->新建->项目->uni-app
填写项目名称：vue3demo
选择项目存放目录：D:/HBuilderProjects
一定要注意vue的版本，当前选择的版本为vue3
点击“创建”之后进入项目界面
其中各文件的作用
（1）pages是存放页面的文件夹
（2）Static是存放图片等资源的文件夹
（3）Manifest.json是项目的配置文件
（4）Pages.json是项目的页面配置文件
二、自定义导航菜单实现
在 Vue 3 中实现自定义导航菜单涉及多个步骤，包括创建组件、定义数据、处理路由（如果使用Vue Router），以及应用样式。
1. 创建导航菜单组件
（1）新建组件存放的文件夹。在项目vue3demo上右键->新建->目录，目录名称：components（不能更改）。
（2）在components下，创建一个新的Vue组件文件，比如NavMenu.vue，用于定义导航菜单的结构和样式。
添加路由链接： 在你的Vue组件中，你可以使用<router-link>组件来创建导航链接。当用户点击这些链接时，Vue Router会根据URL的变化自动渲染对应的组件，实现页面之间的无刷新切换。
代码如下：
<template>
<nav class="nav-menu">
<ul>
<li v-for="item in menuItems" :key="item.name">
<router-link :to="item.route">{{ item.name }}</router-link>
</li>
</ul>
</nav>
</template>
<script>
export default {
name: 'NavMenu',
data() {
return {
menuItems: [
{ name: '首页', route: '/pages/index/index' },
{ name: '列表', route: '/pages/list/list' },
{ name: '关于', route: '/pages/about/about' },
{ name: '联系', route: '/pages/contact/contact' },
// 添加更多菜单项
],
};
},
};
</script>
<style>
.nav-menu {
position: fixed; /* 固定定位 */
bottom: 0; /* 底部对齐 */
left: 0; /* 左侧对齐 */
width: 100%; /* 全宽 */
background-color: #ccc; /* 背景颜色 */
color: #fff; /* 文字颜色 */
text-align: center; /* 文字居中 */
padding: 10px 0; /* 内边距 */
box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1); /* 底部阴影 */
}
.nav-menu ul {
list-style: none; /* 移除列表样式 */
padding: 0; /* 移除内边距 */
margin: 0; /* 移除外边距 */
display: flex; /* Flexbox布局 */
justify-content: center; /* 子项居中 */
}
.nav-menu li {
margin: 0 15px; /* 子项之间的间距 */
}
.nav-menu a {
color: #fff; /* 链接颜色 */
text-decoration: none; /* 移除下划线 */
}
.nav-menu a:hover {
color: #007bff;
}
</style>2. 配置路由（使用Vue Router）
（1）Vue 3项目中安装Vue Router
确保项目环境：确保你的开发环境中已经安装了Node.js（可以直接在官网https://nodejs.org/zh-cn下载安装）和npm。
安装Vue Router：在你的项目根目录下，打开命令行工具（可以直接打开HBuilder X的“终端”），并运行命令来安装Vue Router：npm install vue-router。
（2）创建路由配置
在项目根目录下，创建一个名为router的文件夹，并在其中新建一个index.js文件。在 router/index.js中配置Vue Router的路由规则。
//从vue-router包中导入了createRouter和createWebHistory函数。
import { createRouter, createWebHistory } from 'vue-router';
//以下为示例，当前案例没有用到
import Index from '../pages/index/index.vue';
import List from '../pages/list/list.vue';
import About from '../pages/about/about.vue';
import Contact from '../pages/contact/contact.vue';
// 定义路由规则
const routes = [
//每个路由规则都是一个对象
//包含path（路径）、name（路由名称，可选）、component（要渲染的组件）等属性
//以下为示例，当前案例没有用到
{ path: '/', name: 'Index', component: Index },
{ path: '/list', name: 'List', component: List },
{ path: '/about', name: 'About', component: About },
{ path: '/contact', name: 'Contact', component: Contact },
// 可以添加更多路由
];
// 创建路由实例并传入路由规则和路由历史记录模式
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
export default router;（3）使用路由：在你的主入口文件（通常是main.js）中引入并使用这个路由实例。在main.js文件中任意位置增加下面的代码：
import './router/index.js'
3. 在主应用组件中使用导航菜单组件
在你的主应用组件中，引入并使用NavMenu组件。本示例是在/pages/index/index.vue中。插入的内容为下图红色框中的部分。
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
</view>
<div id="app">
<NavMenu />
<router-view />
</div>
</template>
<script>
import NavMenu from '/components/NavMenu.vue';
export default {
components: {
NavMenu,
},
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
methods: {
}
}
</script>
<style>
</style>三、效果
注意事项
确保Vue Router版本与Vue 3兼容。
如果你不使用Vue Router，可以简单地将<router-link>替换为<a>标签，并设置相应的href属性。
以上就是vue3实现自定义导航菜单的示例代码的详细内容，更多关于vue3自定义导航菜单的资料请关注脚本之家其它相关文章！