当前位置：首页 > VUE

vue导航栏实现

2026-03-28 13:17:42VUE

Vue 导航栏实现方法

基础实现（基于 Vue Router）

在 Vue 项目中，导航栏通常与 Vue Router 结合使用。以下是一个基础实现示例：

模板部分

<template>
  <nav>
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-link to="/contact">联系我们</router-link>
  </nav>
</template>

样式部分

nav {
  background-color: #333;
  padding: 10px;
}

router-link {
  color: white;
  margin-right: 15px;
  text-decoration: none;
}

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

动态导航栏

对于需要根据用户权限或状态动态变化的导航栏：

<template>
  <nav>
    <router-link v-for="item in navItems" :key="item.path" :to="item.path">
      {{ item.name }}
    </router-link>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      navItems: [
        { path: '/', name: '首页' },
        { path: '/products', name: '产品' },
        { path: '/about', name: '关于我们' }
      ]
    }
  }
}
</script>

响应式导航栏

实现移动端友好的响应式导航栏：

<template>
  <div>
    <button @click="toggleMenu">菜单</button>
    <nav :class="{ 'show': isMenuOpen }">
      <router-link to="/">首页</router-link>
      <router-link to="/about">关于</router-link>
    </nav>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isMenuOpen: false
    }
  },
  methods: {
    toggleMenu() {
      this.isMenuOpen = !this.isMenuOpen
    }
  }
}
</script>

<style>
nav {
  display: none;
}

nav.show {
  display: block;
}

@media (min-width: 768px) {
  button {
    display: none;
  }
  nav {
    display: block;
  }
}
</style>

使用 UI 框架

如果使用 Element UI 等框架：

<template>
  <el-menu mode="horizontal">
    <el-menu-item index="1">首页</el-menu-item>
    <el-submenu index="2">
      <template slot="title">产品</template>
      <el-menu-item index="2-1">产品1</el-menu-item>
      <el-menu-item index="2-2">产品2</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
import { ElMenu, ElMenuItem, ElSubmenu } from 'element-ui'

export default {
  components: {
    ElMenu,
    ElMenuItem,
    ElSubmenu
  }
}
</script>

导航守卫

实现路由切换时的权限控制：

// 在 router/index.js 中
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login')
  } else {
    next()
  }
})

高亮当前路由

为当前路由添加高亮样式：

vue导航栏实现

router-link-exact-active {
  color: #42b983;
  font-weight: bold;
}

标签: vue

分享给朋友：

vue实现打印二维码

安装二维码生成库使用 qrcode 或 vue-qrcode 库生成二维码。通过 npm 安装： npm install qrcode vue-qrcode 生成二维码在 Vue 组…

vue实现详情

Vue 实现详情页的常见方法使用动态路由在 Vue Router 中配置动态路由参数，通过 $route.params 获取详情 ID。示例路由配置： { path: '/detail/:i…

vue轮询实现

Vue 轮询实现方法在 Vue 中实现轮询可以通过以下几种方式：使用 setInterval data() { return { pollInterval: null }…

实现vue table

Vue 表格实现方法基础表格实现使用 Vue 的 v-for 指令可以快速渲染表格数据。在模板中定义表格结构，通过数据绑定动态生成行和列。 <template> <tabl…

vue底层实现

Vue.js 的底层实现原理 Vue.js 是一个渐进式 JavaScript 框架，其核心实现主要包括响应式系统、虚拟 DOM、模板编译和组件化机制。以下是其关键实现细节：响应式系统 Vue 2…

js 实现vue

实现 Vue 的核心功能在 JavaScript 中实现 Vue 的核心功能需要模拟数据绑定、虚拟 DOM 和响应式系统。以下是一个简化版的实现思路：响应式系统通过 Object.define…

vue导航栏实现