当前位置：首页 > VUE

vue实现导航栏切图

2026-01-07 04:56:01VUE

Vue 实现导航栏切图

使用 Vue Router 实现基础导航

在 Vue 项目中，可以通过 Vue Router 实现导航栏的路由切换。创建一个导航栏组件，并在其中使用 <router-link> 标签实现路由跳转。

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

在 router/index.js 中配置路由：

vue实现导航栏切图

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

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

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

export default router;

动态导航栏高亮

通过 Vue Router 的 active-class 属性，可以为当前激活的路由链接添加高亮样式。

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

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

响应式导航栏

使用 Vue 的响应式特性，结合 CSS 媒体查询，实现导航栏在不同屏幕尺寸下的适配。

vue实现导航栏切图

<template>
  <nav>
    <div class="menu-toggle" @click="toggleMenu">
      <span></span>
      <span></span>
      <span></span>
    </div>
    <div class="nav-links" :class="{ 'active': isMenuOpen }">
      <router-link to="/">首页</router-link>
      <router-link to="/about">关于</router-link>
      <router-link to="/contact">联系</router-link>
    </div>
  </nav>
</template>

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

<style scoped>
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu-toggle {
  display: none;
  cursor: pointer;
}

.nav-links {
  display: flex;
  gap: 20px;
}

@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }
  .nav-links {
    display: none;
    flex-direction: column;
    width: 100%;
  }
  .nav-links.active {
    display: flex;
  }
}
</style>

嵌套路由导航

对于嵌套路由，可以在导航栏中动态生成子路由链接。

<template>
  <nav>
    <router-link to="/">首页</router-link>
    <router-link to="/products">产品</router-link>
    <div v-if="$route.path.includes('/products')" class="sub-nav">
      <router-link to="/products/laptop">笔记本</router-link>
      <router-link to="/products/phone">手机</router-link>
    </div>
  </nav>
</template>

<style scoped>
.sub-nav {
  margin-left: 20px;
  display: flex;
  gap: 10px;
}
</style>

导航栏动画效果

通过 Vue 的过渡效果，为导航栏添加平滑的动画。

<template>
  <nav>
    <transition name="fade">
      <div v-if="showNav" class="nav-links">
        <router-link to="/">首页</router-link>
        <router-link to="/about">关于</router-link>
      </div>
    </transition>
  </nav>
</template>

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

以上方法涵盖了 Vue 实现导航栏切图的基础和进阶技巧，可根据实际需求灵活调整。