vue3实现自定义导航菜单

发布于:2024-11-29 ⋅ 阅读:(29) ⋅ 点赞:(0)

一、创建项目

        1. 打开HBuilder X

图1

        2. 新建一个空项目

        文件->新建->项目->uni-app

        填写项目名称:vue3demo

        选择项目存放目录:D:/HBuilderProjects

        一定要注意vue的版本,当前选择的版本为vue3

图2

        点击“创建”之后进入项目界面

图3

        其中各文件的作用

        (1)pages是存放页面的文件夹

        (2)Static是存放图片等资源的文件夹

        (3)Manifest.json是项目的配置文件

        (4)Pages.json是项目的页面配置文件

二、自定义导航菜单实现

        在 Vue 3 中实现自定义导航菜单涉及多个步骤,包括创建组件、定义数据、处理路由(如果使用Vue Router),以及应用样式。

        1. 创建导航菜单组件

        (1)新建组件存放的文件夹。在项目vue3demo上右键->新建->目录,目录名称:components(不能更改)。

        (2)在components下,创建一个新的Vue组件文件,比如NavMenu.vue,用于定义导航菜单的结构和样式。

图4

        添加路由链接: 在你的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。

图5

        (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中。插入的内容为下图红色框中的部分。

图6

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

三、效果

图7

        注意事项

        确保Vue Router版本与Vue 3兼容。

       如果你不使用Vue Router,可以简单地将<router-link>替换为<a>标签,并设置相应的href属性。


网站公告

今日签到

点亮在社区的每一天
去签到