vue3 导航栏
时间: 2025-03-21 11:05:22 浏览: 28
### Vue3 实现导航栏示例教程
在 Vue 3 中实现导航栏通常依赖于 `Vue Router` 来管理页面之间的跳转逻辑。以下是完整的解决方案,涵盖了从安装到配置的具体细节。
#### 安装 Vue Router
首先,在项目中引入并安装 Vue Router 插件:
```bash
npm install vue-router@next
```
#### 配置路由文件
创建一个名为 `router/index.js` 的文件来设置基本的路由规则:
```javascript
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue'; // 假设有一个主页组件
import About from '../views/About.vue'; // 假设有另一个关于页组件
const routes = [
{
path: '/',
name: 'Home',
component: Home,
},
{
path: '/about',
name: 'About',
component: About,
}
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
export default router;
```
此部分代码定义了两个基础路径 `/` 和 `/about` 并分别关联对应的视图组件[^2]。
#### 创建导航栏组件
接着可以设计一个简单的导航栏组件用于展示链接按钮。新建文件 `components/Navbar.vue` 如下所示:
```html
<template>
<nav class="navbar">
<ul>
<li><router-link to="/">首页</router-link></li>
<li><router-link to="/about">关于我们</router-link></li>
</ul>
</nav>
</template>
<script>
export default {
name: "Navbar",
};
</script>
<style scoped>
.navbar ul {
list-style-type: none;
padding: 0;
}
.navbar li {
display: inline-block;
margin-right: 10px;
}
</style>
```
上述模板利用 `<router-link>` 提供由 Vue Router 支持的动态链接功能[^4]。
#### 主程序入口修改
最后一步是在主应用程序文件里注册路由器实例以及加载新建立好的导航栏组件。打开 `main.js` 文件做如下调整:
```javascript
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
createApp(App).use(router).mount('#app');
```
这样就完成了整个流程中的关键环节连接工作[^1]。
#### 添加样式美化(可选)
为了使界面更加友好美观,还可以借助 CSS 或第三方框架如 Element Plus 对其外观进行修饰改进[^3]。
```css
/* Example of customizing the navbar appearance */
.navbar {
background-color: #f8f9fa; /* Light gray background color */
padding: 1rem;
text-align: center;
}
.navbar a {
font-size: larger;
color: black !important;
text-decoration: none;
}
.navbar a.router-link-exact-active {
color: blueviolet !important;
font-weight: bold;
}
```
通过这些操作步骤即可成功搭建起属于自己的 Vue3 导航栏结构。
---
阅读全文
相关推荐


















