当前位置：首页 > VUE

vue 实现导航栏

2026-02-19 22:22:35VUE

Vue 实现导航栏的方法

使用 Vue Router 实现基础导航栏

安装 Vue Router 后，可以通过以下方式实现导航栏：

<template>
  <nav>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </nav>
  <router-view/>
</template>

在 main.js 中配置路由：

import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

app.use(router)

响应式导航栏实现

通过 Vue 的响应式特性实现移动端友好的导航栏：

<template>
  <nav>
    <div class="menu-toggle" @click="toggleMenu">☰</div>
    <ul :class="{ 'active': isActive }">
      <li><router-link to="/">Home</router-link></li>
      <li><router-link to="/about">About</router-link></li>
    </ul>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      isActive: false
    }
  },
  methods: {
    toggleMenu() {
      this.isActive = !this.isActive
    }
  }
}
</script>

<style>
.menu-toggle {
  display: none;
  cursor: pointer;
}
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }
  ul {
    display: none;
  }
  ul.active {
    display: block;
  }
}
</style>

动态导航栏实现

根据用户权限动态生成导航菜单：

<template>
  <nav>
    <router-link 
      v-for="item in menuItems" 
      :key="item.path" 
      :to="item.path"
    >
      {{ item.title }}
    </router-link>
  </nav>
</template>

<script>
export default {
  computed: {
    menuItems() {
      const items = [
        { path: '/', title: 'Home' },
        { path: '/about', title: 'About' }
      ]

      if (this.$store.state.user.isAdmin) {
        items.push({ path: '/admin', title: 'Admin' })
      }

      return items
    }
  }
}
</script>

使用 UI 框架实现导航栏

以 Element Plus 为例：

<template>
  <el-menu 
    mode="horizontal" 
    :default-active="activeIndex"
    @select="handleSelect"
  >
    <el-menu-item index="1">Home</el-menu-item>
    <el-submenu index="2">
      <template #title>Products</template>
      <el-menu-item index="2-1">Option 1</el-menu-item>
      <el-menu-item index="2-2">Option 2</el-menu-item>
    </el-submenu>
    <el-menu-item index="3">About</el-menu-item>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1'
    }
  },
  methods: {
    handleSelect(key) {
      const routes = {
        '1': '/',
        '2-1': '/product1',
        '2-2': '/product2',
        '3': '/about'
      }
      this.$router.push(routes[key])
    }
  }
}
</script>

导航栏样式优化技巧

添加过渡效果提升用户体验：

<style>
nav {
  background: #2c3e50;
  padding: 1rem;
}

.router-link-active {
  color: #42b983;
  font-weight: bold;
}

/* 过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

这些方法涵盖了从基础到进阶的 Vue 导航栏实现方式，可以根据项目需求选择适合的方案或组合使用。

vue 实现导航栏