vue实现网页导航栏

Vue 实现网页导航栏的方法

使用 Vue Router 实现导航栏

安装 Vue Router：

npm install vue-router

在 main.js 或 main.ts 中引入并配置路由：

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/contact', component: Contact }
  ]
})

const app = createApp(App)
app.use(router)
app.mount('#app')

在导航栏组件中实现路由跳转：

<template>
  <nav>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-link to="/contact">Contact</router-link>
  </nav>
</template>

响应式导航栏实现

使用 Vue 的响应式特性实现移动端友好的导航栏：

<template>
  <nav>
    <div class="menu-toggle" @click="toggleMenu">
      <span></span>
      <span></span>
      <span></span>
    </div>
    <ul :class="{ 'active': isMenuOpen }">
      <li><router-link to="/">Home</router-link></li>
      <li><router-link to="/about">About</router-link></li>
      <li><router-link to="/contact">Contact</router-link></li>
    </ul>
  </nav>
</template>

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

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

@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }
  ul {
    display: none;
  }
  ul.active {
    display: block;
  }
}
</style>

导航栏样式优化

添加基础样式提升视觉效果：

nav {
  background: #333;
  padding: 1rem;
}

nav a {
  color: white;
  text-decoration: none;
  margin: 0 1rem;
  padding: 0.5rem;
}

nav a.router-link-exact-active {
  color: #42b983;
  border-bottom: 2px solid #42b983;
}

nav ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

nav li {
  margin: 0 1rem;
}

动态导航栏实现

根据用户登录状态显示不同导航项：

<template>
  <nav>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-link v-if="isLoggedIn" to="/dashboard">Dashboard</router-link>
    <router-link v-else to="/login">Login</router-link>
  </nav>
</template>

<script>
export default {
  computed: {
    isLoggedIn() {
      return this.$store.state.auth.isLoggedIn
    }
  }
}
</script>

导航守卫实现权限控制

在路由配置中添加导航守卫：

router.beforeEach((to, from, next) => {
  const isAuthenticated = checkAuth() // 自定义认证检查
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

在路由配置中标记需要认证的路由：

{
  path: '/dashboard',
  component: Dashboard,
  meta: { requiresAuth: true }
}