当前位置：首页 > VUE

vue实现公共导航栏

2026-01-21 13:17:40VUE

实现公共导航栏的步骤

在Vue项目中实现公共导航栏，可以通过组件化方式将导航栏封装为可复用的组件，并在需要的页面中引入。

创建导航栏组件 在components目录下创建NavBar.vue文件，编写导航栏的模板和逻辑：

<template>
  <nav>
    <ul>
      <li v-for="item in navItems" :key="item.path">
        <router-link :to="item.path">{{ item.name }}</router-link>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      navItems: [
        { name: '首页', path: '/' },
        { name: '关于', path: '/about' },
        { name: '联系', path: '/contact' }
      ]
    }
  }
}
</script>

<style scoped>
nav {
  background-color: #333;
  padding: 1rem;
}
ul {
  display: flex;
  list-style: none;
  gap: 1rem;
}
a {
  color: white;
  text-decoration: none;
}
</style>

在App.vue中使用导航栏 将导航栏组件放在App.vue中，确保它显示在所有页面顶部：

<template>
  <div id="app">
    <NavBar />
    <router-view />
  </div>
</template>

<script>
import NavBar from '@/components/NavBar.vue'

export default {
  components: {
    NavBar
  }
}
</script>

动态路由高亮实现

为当前活动路由添加高亮样式，可以通过Vue Router的router-link-active类实现：

在导航栏组件的样式中添加：

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

或者通过精确匹配：

.router-link-exact-active {
  border-bottom: 2px solid #42b983;
}

响应式导航栏实现

对于移动端设备，可以添加响应式功能：

<template>
  <nav>
    <button @click="toggleMenu">☰</button>
    <ul :class="{ 'show': isMenuOpen }">
      <li v-for="item in navItems" :key="item.path">
        <router-link :to="item.path" @click="isMenuOpen = false">
          {{ item.name }}
        </router-link>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      isMenuOpen: false,
      navItems: [
        { name: '首页', path: '/' },
        { name: '关于', path: '/about' },
        { name: '联系', path: '/contact' }
      ]
    }
  },
  methods: {
    toggleMenu() {
      this.isMenuOpen = !this.isMenuOpen
    }
  }
}
</script>

<style scoped>
button {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}

@media (max-width: 768px) {
  button {
    display: block;
  }
  ul {
    display: none;
    flex-direction: column;
  }
  ul.show {
    display: flex;
  }
}
</style>

使用Vuex管理导航状态

对于更复杂的应用，可以使用Vuex管理导航栏状态：

// store/modules/nav.js
export default {
  state: {
    isMenuOpen: false
  },
  mutations: {
    toggleMenu(state) {
      state.isMenuOpen = !state.isMenuOpen
    }
  },
  actions: {
    toggleMenu({ commit }) {
      commit('toggleMenu')
    }
  }
}

然后在导航栏组件中使用：

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState('nav', ['isMenuOpen'])
  },
  methods: {
    ...mapActions('nav', ['toggleMenu'])
  }
}
</script>

这些方法提供了从基础到高级的公共导航栏实现方案，可以根据项目需求选择适合的方式。

vue实现公共导航栏