vue实现导航页

实现导航页的基本结构

使用Vue CLI或Vite创建一个新的Vue项目，确保项目基础结构搭建完成。导航页通常需要一个清晰的布局，包括顶部导航栏和内容区域。

<template>
  <div class="navigation-page">
    <nav class="navbar">
      <div class="logo">导航页</div>
      <ul class="nav-links">
        <li v-for="(item, index) in navItems" :key="index">
          <a :href="item.link">{{ item.title }}</a>
        </li>
      </ul>
    </nav>
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

定义导航数据

在Vue组件的data或setup函数中定义导航项的数据。可以使用数组存储导航信息，方便动态渲染。

<script>
export default {
  data() {
    return {
      navItems: [
        { title: '首页', link: '/' },
        { title: '关于', link: '/about' },
        { title: '服务', link: '/services' },
        { title: '联系', link: '/contact' }
      ]
    }
  }
}
</script>

添加样式

为导航页添加CSS样式，确保页面美观且易于使用。可以使用Flexbox或Grid布局来组织导航栏。

<style scoped>
.navigation-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background-color: #333;
  color: white;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 1rem;
}

.nav-links a {
  color: white;
  text-decoration: none;
}

.content {
  flex: 1;
  padding: 1rem;
}
</style>

集成路由

使用Vue Router实现页面导航功能。在router/index.js中配置路由，确保点击导航项时可以切换到对应的页面。

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

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

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

export default router

动态高亮当前页

通过Vue Router的route对象动态高亮当前页面的导航项，提升用户体验。

<li v-for="(item, index) in navItems" :key="index">
  <a 
    :href="item.link" 
    :class="{ active: $route.path === item.link }"
  >
    {{ item.title }}
  </a>
</li>

.active {
  font-weight: bold;
  border-bottom: 2px solid white;
}

响应式设计

为导航页添加响应式设计，确保在移动设备上也能良好显示。可以使用媒体查询调整导航栏的布局。

@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
  }

  .nav-links {
    flex-direction: column;
    gap: 0.5rem;
  }
}

添加交互效果

为导航项添加悬停效果或过渡动画，增强页面的交互性。

.nav-links a {
  transition: color 0.3s ease;
}

.nav-links a:hover {
  color: #42b983;
}

通过以上步骤，可以快速实现一个功能完善且美观的Vue导航页。