vue实现导航页
实现导航页的基本结构
使用Vue CLI或Vite创建项目后，在App.vue或主组件中搭建基础框架。导航页通常包含顶部栏、侧边栏和内容区域三部分。
<template>
<div class="layout">
<header class="header">
<!-- 顶部导航栏 -->
</header>
<aside class="sidebar">
<!-- 侧边导航菜单 -->
</aside>
<main class="main">
<!-- 页面内容区域 -->
<router-view />
</main>
</div>
</template>配置路由导航
在router/index.js中定义路由，配合vue-router实现页面跳转。需要安装vue-router依赖。
const routes = [
{
path: '/',
name: 'Home',
component: () => import('@/views/Home.vue')
},
{
path: '/about',
name: 'About',
component: () => import('@/views/About.vue')
}
]实现动态导航菜单
通过v-for渲染菜单项，结合路由配置实现动态生成。菜单数据可以存储在data或Vuex/Pinia中。
<nav>
<ul>
<li v-for="item in menuItems" :key="item.path">
<router-link :to="item.path">{{ item.title }}</router-link>
</li>
</ul>
</nav>添加交互效果
使用Vue的过渡效果和事件处理增强用户体验。例如添加菜单激活状态和折叠功能。
<script>
export default {
data() {
return {
isCollapsed: false
}
},
methods: {
toggleMenu() {
this.isCollapsed = !this.isCollapsed
}
}
}
</script>响应式设计
通过CSS媒体查询和Vue的响应式数据实现适配不同设备的导航布局。
@media (max-width: 768px) {
.sidebar {
transform: translateX(-100%);
}
.sidebar.active {
transform: translateX(0);
}
}状态管理整合
对于复杂应用，使用Pinia或Vuex管理导航状态。例如存储菜单展开状态、权限信息等。
// stores/nav.js
export const useNavStore = defineStore('nav', {
state: () => ({
expandedItems: []
})
})权限控制实现
根据用户角色动态显示导航项，可以在路由配置中添加meta字段或通过API获取权限数据。
{
path: '/admin',
meta: { requiresAuth: true },
component: () => import('@/views/Admin.vue')
}
