当前位置：首页 > VUE

vue导航栏实现

2026-03-08 02:54:13VUE

实现Vue导航栏的基本方法

使用Vue Router创建基础导航结构，在项目中安装vue-router后，通过router-link组件实现页面跳转。

<template>
  <nav>
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于</router-link>
  </nav>
</template>

动态导航菜单实现

通过v-for循环渲染导航项，结合路由配置实现动态生成菜单。

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

<script>
export default {
  data() {
    return {
      menuItems: [
        { path: '/', title: '首页' },
        { path: '/about', title: '关于我们' }
      ]
    }
  }
}
</script>

响应式导航栏设计

结合CSS媒体查询和Vue的状态管理，实现移动端友好的响应式导航。

<template>
  <div class="navbar">
    <div class="logo">Brand</div>
    <div 
      class="menu-toggle" 
      @click="toggleMenu"
    >
      ☰
    </div>
    <div 
      class="nav-links" 
      :class="{ 'active': isMenuOpen }"
    >
      <router-link to="/">首页</router-link>
      <router-link to="/products">产品</router-link>
    </div>
  </div>
</template>

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

<style>
@media (max-width: 768px) {
  .nav-links {
    display: none;
  }
  .nav-links.active {
    display: flex;
    flex-direction: column;
  }
}
</style>

导航栏权限控制

结合Vuex和路由守卫，实现基于用户角色的导航显示控制。

<template>
  <nav>
    <router-link to="/">首页</router-link>
    <router-link 
      v-if="user.isAdmin"
      to="/admin"
    >
      管理面板
    </router-link>
  </nav>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['user'])
  }
}
</script>

导航栏激活状态样式

利用router-link-active类或精确匹配router-link-exact-active，为当前路由添加高亮样式。

<style>
.router-link-active {
  color: #42b983;
  border-bottom: 2px solid #42b983;
}
</style>

下拉菜单实现

结合Vue的v-show或v-if指令，实现带下拉功能的导航菜单。

vue导航栏实现

<template>
  <div class="nav-item">
    <button @click="toggleDropdown">产品</button>
    <ul v-show="isDropdownOpen">
      <li><router-link to="/products/web">Web产品</router-link></li>
      <li><router-link to="/products/mobile">移动产品</router-link></li>
    </ul>
  </div>
</template>

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

标签: vue