当前位置：首页 > 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 属性：

vue导航栏实现

<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 实现权限过滤：

vue导航栏实现

<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组件的data中定义初始数据和表单绑定的变量： data() { return { items: [ { id: 1, name:…

vue实现标签

Vue 实现标签的方法在 Vue 中实现标签功能可以通过多种方式完成，以下是几种常见的方法：使用动态组件动态组件可以根据不同的条件渲染不同的标签内容。通过 :is 属性动态绑定组件名，实现标签…

vue 实现排序

Vue 实现排序的方法使用计算属性实现排序通过计算属性对数组进行排序，可以保持原始数据不变。示例代码展示了如何对列表按名称升序排序： <template> <div>…

vue实现曲线

Vue 实现曲线的方法在 Vue 中实现曲线可以通过多种方式，包括使用 SVG、Canvas 或第三方库如 D3.js、ECharts 等。以下是几种常见的方法：使用 SVG 绘制曲线 SVG…

vue 实现modal

Vue 实现 Modal 的方法使用 Vue 原生组件通过 Vue 的组件系统可以轻松实现 Modal。创建一个可复用的 Modal 组件，通过 props 控制显示与隐藏。 <templ…

vue实现mui

使用 Vue 实现 MUI（Material-UI）风格的界面 Vue 本身不直接提供 MUI（Material Design）组件，但可以通过集成第三方库或手动实现来达到类似效果。以下是几种常见方法…

vue导航栏实现