vue实现导航栏跳转
路由配置
在Vue项目中，导航栏跳转通常通过Vue Router实现。确保已安装并配置好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: '/', name: 'Home', component: Home },
{ path: '/about', name: 'About', component: About }
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router导航栏组件
创建导航栏组件（如NavBar.vue），使用<router-link>实现跳转：
<template>
<nav>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</nav>
</template>编程式导航
通过useRouter实现编程式跳转，适合按钮点击等场景：
<template>
<button @click="goToAbout">About</button>
</template>
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const goToAbout = () => {
router.push('/about')
}
</script>路由传参
跳转时传递参数可通过动态路由或查询参数：
// 动态路由配置
{ path: '/user/:id', component: User }
// 跳转方式
router.push('/user/123') // 动态路由
router.push({ path: '/user', query: { id: 123 } }) // 查询参数导航守卫
在路由配置中添加全局守卫控制跳转逻辑：
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login')
} else {
next()
}
})样式激活
为当前活动路由链接添加样式，使用router-link-active类：
.router-link-active {
font-weight: bold;
color: #42b983;
}嵌套路由
实现多级导航栏时使用嵌套路由：
{
path: '/user',
component: User,
children: [
{ path: 'profile', component: Profile },
{ path: 'posts', component: Posts }
]
}
