当前位置：首页 > VUE

vue导航栏实现

2026-01-08 13:56:12VUE

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 }
  }
})

vue导航栏实现

标签: vue

分享给朋友：

vue 实现全选

Vue 实现全选功能在 Vue 中实现全选功能通常需要结合复选框的状态管理，以下是几种常见的实现方式：使用 v-model 绑定数组通过 v-model 绑定一个数组来管理选中的项，全选时将…

vue实现前端分离

Vue 实现前后端分离前后端分离是一种架构模式，前端负责页面渲染和交互逻辑，后端提供数据接口。Vue.js 作为前端框架，非常适合实现前后端分离的开发模式。核心实现步骤创建 Vue 项目使…

vue实现屏幕共享

Vue 实现屏幕共享的方法使用 WebRTC 和 getDisplayMedia API 通过 navigator.mediaDevices.getDisplayMedia 捕获屏幕内容，结合 We…

vue伪函数实现

Vue 伪函数实现方法伪函数（Mock Function）在 Vue 中常用于测试或模拟某些逻辑，以下是几种常见的实现方式：使用 Jest 的 jest.fn() 在单元测试中，可以通过 Jes…

项目基于vue实现

基于Vue实现项目的关键方法搭建基础环境安装Node.js和npm/yarn，确保开发环境具备运行Vue的能力。通过Vue CLI快速初始化项目结构，选择所需配置（如Babel、Router、Vu…

vue实现裁剪头像

Vue 实现头像裁剪功能实现头像裁剪功能通常需要结合第三方库如 cropperjs 或 vue-cropper。以下是两种常见实现方式：使用 vue-cropper 库安装依赖： n…

vue导航栏实现