vue导航栏实现
Vue 导航栏实现方法
使用 Vue Router 实现基础导航
在 Vue 项目中安装 vue-router 后，通过路由配置实现导航功能。路由配置文件中定义路径和对应组件：
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]创建路由实例并挂载到 Vue 应用：
const router = createRouter({
history: createWebHistory(),
routes
})在模板中使用 <router-link> 组件生成导航链接：
<router-link to="/">首页</router-link>
<router-link to="/about">关于</router-link>动态高亮当前菜单项
通过 router-link-active 类自动实现当前路由链接的高亮样式。自定义高亮类名可在路由配置中设置：
const router = createRouter({
linkActiveClass: 'active-menu'
})CSS 中定义高亮样式：
.active-menu {
color: #42b983;
font-weight: bold;
}响应式导航栏实现
使用 Vue 的响应式数据和事件处理实现移动端菜单切换功能。定义数据属性控制菜单显隐：
data() {
return {
isMenuOpen: false
}
}模板中添加移动端菜单按钮和响应式菜单项：
<button @click="isMenuOpen = !isMenuOpen">菜单</button>
<nav :class="{ 'show-menu': isMenuOpen }">
<router-link to="/">首页</router-link>
<router-link to="/about">关于</router-link>
</nav>CSS 控制菜单在不同设备上的显示：
nav {
display: flex;
}
@media (max-width: 768px) {
nav {
display: none;
flex-direction: column;
}
.show-menu {
display: flex;
}
}嵌套路由导航实现
对于多级导航菜单，配置嵌套路由：
const routes = [
{
path: '/products',
component: Products,
children: [
{ path: 'list', component: ProductList },
{ path: 'detail/:id', component: ProductDetail }
]
}
]在父组件模板中添加 <router-view> 显示子路由内容：
<router-link to="/products/list">产品列表</router-link>
<router-view></router-view>导航守卫控制权限
使用路由守卫实现导航权限控制：
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated()) {
next('/login')
} else {
next()
}
})路由配置中添加元信息：
{
path: '/admin',
component: Admin,
meta: { requiresAuth: true }
}
