vue3實現(xiàn)自定義導(dǎo)航菜單的示例代碼

更新時間：2024年11月30日 10:47:24 作者：搏博

這篇文章主要為大家詳細介紹了如何使用vue3實現(xiàn)自定義導(dǎo)航菜單,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

一、創(chuàng)建項目

1. 打開HBuilder X

2. 新建一個空項目

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

填寫項目名稱：vue3demo

選擇項目存放目錄：D:/HBuilderProjects

一定要注意vue的版本，當前選擇的版本為vue3

點擊“創(chuàng)建”之后進入項目界面

其中各文件的作用

（1）pages是存放頁面的文件夾

（2）Static是存放圖片等資源的文件夾

（3）Manifest.json是項目的配置文件

（4）Pages.json是項目的頁面配置文件

二、自定義導(dǎo)航菜單實現(xiàn)

在 Vue 3 中實現(xiàn)自定義導(dǎo)航菜單涉及多個步驟，包括創(chuàng)建組件、定義數(shù)據(jù)、處理路由（如果使用Vue Router），以及應(yīng)用樣式。

1. 創(chuàng)建導(dǎo)航菜單組件

（1）新建組件存放的文件夾。在項目vue3demo上右鍵->新建->目錄，目錄名稱：components（不能更改）。

（2）在components下，創(chuàng)建一個新的Vue組件文件，比如NavMenu.vue，用于定義導(dǎo)航菜單的結(jié)構(gòu)和樣式。

添加路由鏈接：在你的Vue組件中，你可以使用<router-link>組件來創(chuàng)建導(dǎo)航鏈接。當用戶點擊這些鏈接時，Vue Router會根據(jù)URL的變化自動渲染對應(yīng)的組件，實現(xiàn)頁面之間的無刷新切換。

代碼如下：

<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: '關(guān)于', route: '/pages/about/about' },
	        { name: '聯(lián)系', route: '/pages/contact/contact' },
	        // 添加更多菜單項
	      ],
	    };
	  },
	};
</script>
 
<style>
.nav-menu {
    position: fixed; /* 固定定位 */
    bottom: 0; /* 底部對齊 */
    left: 0; /* 左側(cè)對齊 */
    width: 100%; /* 全寬 */
    background-color: #ccc; /* 背景顏色 */
    color: #fff; /* 文字顏色 */
    text-align: center; /* 文字居中 */
    padding: 10px 0; /* 內(nèi)邊距 */
    box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1); /* 底部陰影 */
}
.nav-menu ul {
    list-style: none; /* 移除列表樣式 */
    padding: 0; /* 移除內(nèi)邊距 */
    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

確保項目環(huán)境：確保你的開發(fā)環(huán)境中已經(jīng)安裝了Node.js（可以直接在官網(wǎng)https://nodejs.org/zh-cn下載安裝）和npm。

安裝Vue Router：在你的項目根目錄下，打開命令行工具（可以直接打開HBuilder X的“終端”），并運行命令來安裝Vue Router：npm install vue-router。

（2）創(chuàng)建路由配置

在項目根目錄下，創(chuàng)建一個名為router的文件夾，并在其中新建一個index.js文件。在 router/index.js中配置Vue Router的路由規(guī)則。

//從vue-router包中導(dǎo)入了createRouter和createWebHistory函數(shù)。
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';
 
// 定義路由規(guī)則
const routes = [
	//每個路由規(guī)則都是一個對象
	//包含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 },
   // 可以添加更多路由
];
 
// 創(chuàng)建路由實例并傳入路由規(guī)則和路由歷史記錄模式
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});
 
export default router;

（3）使用路由：在你的主入口文件（通常是main.js）中引入并使用這個路由實例。在main.js文件中任意位置增加下面的代碼：

import './router/index.js'

3. 在主應(yīng)用組件中使用導(dǎo)航菜單組件

在你的主應(yīng)用組件中，引入并使用NavMenu組件。本示例是在/pages/index/index.vue中。插入的內(nèi)容為下圖紅色框中的部分。

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