vue实现导航栏效果

实现基础导航栏结构

使用Vue的<router-link>组件创建导航菜单项，结合Vue Router实现路由跳转。基础模板示例：

<template>
  <nav class="navbar">
    <router-link to="/" class="nav-item">首页</router-link>
    <router-link to="/about" class="nav-item">关于</router-link>
    <router-link to="/products" class="nav-item">产品</router-link>
    <router-link to="/contact" class="nav-item">联系我们</router-link>
  </nav>
</template>

<style scoped>
.navbar {
  display: flex;
  background-color: #2c3e50;
  padding: 1rem;
}
.nav-item {
  color: white;
  padding: 0.5rem 1rem;
  text-decoration: none;
}
.router-link-exact-active {
  font-weight: bold;
  border-bottom: 2px solid #42b983;
}
</style>

响应式导航栏实现

通过Vue的响应式数据和计算属性实现移动端菜单折叠效果：

<template>
  <nav class="navbar">
    <div class="navbar-brand" @click="toggleMenu">菜单</div>
    <div class="nav-items" :class="{ 'is-active': isMenuOpen }">
      <router-link v-for="item in navItems" :key="item.path" 
                   :to="item.path" class="nav-item">
        {{ item.text }}
      </router-link>
    </div>
  </nav>
</template>

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

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

动态高亮当前路由

利用Vue Router的$route对象实现动态激活样式：

computed: {
  activeRoute() {
    return this.$route.path
  }
}

样式部分添加：

.nav-item.active {
  background-color: #42b983;
  color: white;
}

模板中绑定动态class：

<router-link 
  v-for="item in navItems" 
  :key="item.path"
  :to="item.path"
  class="nav-item"
  :class="{ active: activeRoute === item.path }">
  {{ item.text }}
</router-link>

嵌套导航实现

对于多级导航菜单，可以使用递归组件：

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

<script>
export default {
  name: 'NavMenu',
  props: {
    items: Array
  }
}
</script>

导航守卫控制

在Vue Router中设置全局前置守卫实现权限控制：

router.beforeEach((to, from, next) => {
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
  if (requiresAuth && !isAuthenticated()) {
    next('/login')
  } else {
    next()
  }
})