vue导航栏实现

Vue 导航栏实现方法

基础路由配置

安装 vue-router 并配置路由表，在 router/index.js 中定义路径与组件的映射关系：

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

const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/about', name: 'About', component: () => import('../views/About.vue') }
]

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

导航组件实现

创建 NavBar.vue 组件，使用 <router-link> 实现导航跳转：

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

<style scoped>
nav {
  display: flex;
  gap: 1rem;
  padding: 1rem;
}
.router-link-active {
  font-weight: bold;
}
</style>

动态高亮当前页

通过 v-bind 绑定动态类名，结合路由的 exact-active-class 属性：

<router-link 
  to="/about"
  active-class="active-link"
  exact-active-class="exact-active"
>关于</router-link>

响应式导航栏

添加移动端菜单切换功能，利用 Vue 的响应式数据：

<script setup>
import { ref } from 'vue'
const isMenuOpen = ref(false)
</script>

<template>
  <button @click="isMenuOpen = !isMenuOpen">菜单</button>
  <nav :class="{ 'show-menu': isMenuOpen }">
    <!-- 导航链接 -->
  </nav>
</template>

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

权限控制导航项

结合 Vuex 或 Pinia 实现权限过滤：

<script setup>
import { useAuthStore } from '@/stores/auth'
const auth = useAuthStore()
</script>

<template>
  <router-link v-if="auth.isAdmin" to="/admin">管理</router-link>
</template>

嵌套路由导航

处理多级菜单时，在路由配置中添加 children 字段：

{
  path: '/products',
  component: ProductsLayout,
  children: [
    { path: '', component: ProductList },
    { path: ':id', component: ProductDetail }
  ]
}

滚动行为控制

在路由配置中添加滚动行为控制，提升用户体验：

const router = createRouter({
  scrollBehavior(to) {
    if (to.hash) {
      return { el: to.hash }
    }
    return { top: 0 }
  }
})