vue实现导航栏

Vue 实现导航栏的方法

使用 Vue Router 实现基础导航

安装 Vue Router 依赖：

npm install vue-router

创建路由配置文件（如 router/index.js）：

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

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

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

export default router

在 App.vue 中使用 <router-link> 创建导航：

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

响应式导航栏实现

使用 Vue 的响应式特性实现移动端菜单：

<template>
  <nav>
    <div class="menu-toggle" @click="toggleMenu">
      <span></span>
      <span></span>
      <span></span>
    </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>

导航栏样式优化

添加 CSS 过渡效果：

nav {
  background: #333;
  padding: 1rem;
}

router-link {
  color: white;
  text-decoration: none;
  margin: 0 1rem;
  transition: color 0.3s;
}

router-link:hover {
  color: #42b983;
}

ul {
  list-style: none;
  transition: all 0.3s ease;
}

动态高亮当前路由

在导航组件中添加高亮逻辑：

<script>
import { computed } from 'vue'
import { useRoute } from 'vue-router'

export default {
  setup() {
    const route = useRoute()
    const currentRoute = computed(() => route.path)

    return { currentRoute }
  }
}
</script>

<template>
  <nav>
    <router-link 
      to="/" 
      :class="{ 'active': currentRoute === '/' }"
    >
      Home
    </router-link>
    <router-link 
      to="/about" 
      :class="{ 'active': currentRoute === '/about' }"
    >
      About
    </router-link>
  </nav>
</template>

<style>
.active {
  color: #42b983;
  font-weight: bold;
}
</style>

嵌套路由导航

实现多级导航结构：

// router/index.js
const routes = [
  {
    path: '/products',
    component: Products,
    children: [
      { path: '', component: ProductList },
      { path: ':id', component: ProductDetail }
    ]
  }
]

<!-- Products.vue -->
<template>
  <div>
    <nav class="sub-nav">
      <router-link to="/products">List</router-link>
      <router-link to="/products/1">Detail</router-link>
    </nav>
    <router-view/>
  </div>
</template>