vue3.0实现导航条

Vue 3.0 实现导航条的方法

使用 Vue Router 创建基础导航

安装 Vue Router 依赖：

npm install vue-router@4

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

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

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

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

export default router

创建导航组件

在 src/components/NavBar.vue 中：

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

<script>
export default {
  name: 'NavBar'
}
</script>

<style scoped>
nav {
  padding: 1rem;
  background: #f0f0f0;
}
router-link {
  margin-right: 1rem;
}
</style>

在主应用中注册使用

在 src/App.vue 中引入导航组件：

<template>
  <NavBar />
  <router-view />
</template>

<script>
import NavBar from './components/NavBar.vue'

export default {
  components: { NavBar }
}
</script>

响应式导航实现

添加响应式功能：

<template>
  <nav>
    <div class="menu-toggle" @click="toggleMenu">☰</div>
    <div class="nav-links" :class="{ active: isActive }">
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </div>
  </nav>
</template>

<script>
import { ref } from 'vue'
export default {
  setup() {
    const isActive = ref(false)
    const toggleMenu = () => {
      isActive.value = !isActive.value
    }
    return { isActive, toggleMenu }
  }
}
</script>

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

添加导航守卫

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

router.beforeEach((to, from, next) => {
  document.title = to.name || 'Vue App'
  next()
})

使用 Composition API 增强功能

添加当前路由高亮功能：

<script>
import { computed } from 'vue'
import { useRoute } from 'vue-router'

export default {
  setup() {
    const route = useRoute()
    const isCurrentRoute = (path) => {
      return computed(() => route.path === path)
    }
    return { isCurrentRoute }
  }
}
</script>

<template>
  <router-link 
    to="/" 
    :class="{ active: isCurrentRoute('/') }"
  >Home</router-link>
</template>