vue顶部导航栏模板
时间: 2025-02-16 15:12:05 浏览: 53
### 使用 Vue.js 实现顶部导航栏
为了创建一个功能齐全且易于管理的顶部导航栏,可以利用 Vue 的组件化特性。下面是一个基于 Vue 组件化的简单顶部导航栏实例。
#### HTML 结构
```html
<div id="app">
<nav-bar></nav-bar>
</div>
```
#### JavaScript 配置与逻辑处理
```javascript
// 定义导航条组件
Vue.component('nav-bar', {
template: `
<header class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">品牌名</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li v-for="(item, index) in items" :key="index" class="nav-item active">
<router-link tag="a" :to="{ name: item.routeName }" class="nav-link">{{ item.name }}</router-link>
</li>
</ul>
</div>
</header>`,
data() {
return {
items: [
{name: "首页", routeName: 'home'},
{name: "关于我们", routeName: 'about'},
{name: "服务", routeName: 'services'}
]
}
},
})
new Vue({
el: '#app',
})
```
此代码片段展示了如何使用 `v-for` 指令循环遍历菜单项列表并动态生成链接[^1]。此外还引入了 Bootstrap CSS 类来美化样式[^3]。对于路由跳转,则借助于 `<router-link>` 标签完成页面间的平滑过渡[^4]。
阅读全文
相关推荐


















