vue如何设置导航栏、侧边栏为公共页面

# Vue如何设置导航栏、侧边栏为公共页面

## 前言

在Vue项目开发中，导航栏(Navbar)和侧边栏(Sidebar)是绝大多数管理系统和内容型网站的基础组件。将这些组件设置为公共页面可以避免重复代码，提高开发效率，同时保持整个应用风格的一致性。本文将详细介绍在Vue 2和Vue 3项目中如何实现这一功能。

## 一、基础项目结构搭建

### 1.1 创建Vue项目

```bash
# Vue CLI创建项目
vue create my-project

# 或使用Vite创建Vue 3项目
npm create vite@latest my-project --template vue

1.2 典型目录结构

src/
├── assets/
├── components/
│   ├── layout/
│   │   ├── Navbar.vue
│   │   ├── Sidebar.vue
│   │   └── AppLayout.vue
├── views/
├── App.vue
└── main.js

二、Vue 2实现方案

2.1 创建布局组件

Navbar.vue 组件示例

<template>
  <nav class="navbar">
    <div class="navbar-brand">
      <router-link to="/">My App</router-link>
    </div>
    <ul class="navbar-menu">
      <li><router-link to="/home">首页</router-link></li>
      <li><router-link to="/about">关于</router-link></li>
    </ul>
  </nav>
</template>

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

<style scoped>
.navbar {
  background-color: #2c3e50;
  color: white;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
}
</style>

Sidebar.vue 组件示例

<template>
  <aside class="sidebar">
    <ul>
      <li v-for="item in menuItems" :key="item.path">
        <router-link :to="item.path">{{ item.title }}</router-link>
      </li>
    </ul>
  </aside>
</template>

<script>
export default {
  name: 'Sidebar',
  data() {
    return {
      menuItems: [
        { path: '/dashboard', title: '仪表盘' },
        { path: '/settings', title: '设置' }
      ]
    }
  }
}
</script>

2.2 创建布局容器组件

AppLayout.vue

<template>
  <div class="app-layout">
    <Navbar />
    <div class="main-container">
      <Sidebar />
      <main class="content">
        <router-view />
      </main>
    </div>
  </div>
</template>

<script>
import Navbar from './Navbar.vue'
import Sidebar from './Sidebar.vue'

export default {
  name: 'AppLayout',
  components: { Navbar, Sidebar }
}
</script>

<style>
.app-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.main-container {
  display: flex;
  flex: 1;
}

.content {
  flex: 1;
  padding: 20px;
}
</style>

2.3 在App.vue中使用布局

<template>
  <div id="app">
    <router-view v-if="$route.meta.requiresLayout" />
    <app-layout v-else>
      <router-view />
    </app-layout>
  </div>
</template>

<script>
import AppLayout from './components/layout/AppLayout.vue'

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

三、Vue 3实现方案

3.1 使用Composition API重构组件

Navbar.vue (Vue 3版本)

<template>
  <nav class="navbar">
    <!-- 内容同Vue 2版本 -->
  </nav>
</template>

<script setup>
// 使用script setup语法
</script>

3.2 动态布局切换

<template>
  <component :is="layout">
    <router-view />
  </component>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import AppLayout from './components/layout/AppLayout.vue'
import EmptyLayout from './components/layout/EmptyLayout.vue'

const route = useRoute()

const layout = computed(() => {
  return route.meta.layout || 'app-layout'
})

const layouts = {
  'app-layout': AppLayout,
  'empty-layout': EmptyLayout
}
</script>

四、路由配置方案

4.1 基本路由配置

import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/Home.vue'
import Login from '../views/Login.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/login',
      component: Login,
      meta: { requiresLayout: false }
    },
    {
      path: '/',
      component: Home,
      meta: { requiresLayout: true }
    }
  ]
})

4.2 嵌套路由实现

{
  path: '/admin',
  component: AppLayout,
  children: [
    {
      path: 'dashboard',
      component: Dashboard
    },
    {
      path: 'settings',
      component: Settings
    }
  ]
}

五、状态管理集成

5.1 使用Vuex管理侧边栏状态

// store/modules/layout.js
export default {
  state: {
    sidebarCollapsed: false
  },
  mutations: {
    TOGGLE_SIDEBAR(state) {
      state.sidebarCollapsed = !state.sidebarCollapsed
    }
  },
  actions: {
    toggleSidebar({ commit }) {
      commit('TOGGLE_SIDEBAR')
    }
  }
}

5.2 在组件中使用

<template>
  <button @click="toggleSidebar">
    {{ sidebarCollapsed ? '展开' : '折叠' }}
  </button>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState('layout', ['sidebarCollapsed'])
  },
  methods: {
    ...mapActions('layout', ['toggleSidebar'])
  }
}
</script>

六、高级技巧与最佳实践

6.1 动态菜单生成

// 根据权限生成菜单
function generateMenu(userRole) {
  const allRoutes = [
    { path: '/dashboard', title: '仪表盘', roles: ['admin', 'user'] },
    { path: '/admin', title: '管理', roles: ['admin'] }
  ]
  
  return allRoutes.filter(route => 
    route.roles.includes(userRole)
  )
}

6.2 响应式设计

/* 移动端适配 */
@media (max-width: 768px) {
  .main-container {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
    height: auto;
  }
}

6.3 过渡动画

<template>
  <transition name="slide-fade">
    <sidebar v-if="showSidebar" />
  </transition>
</template>

<style>
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}
</style>

七、常见问题解决方案

7.1 导航栏高亮当前路由

<template>
  <li :class="{ 'active': isActive(item.path) }">
    <router-link :to="item.path">{{ item.title }}</router-link>
  </li>
</template>

<script>
export default {
  methods: {
    isActive(path) {
      return this.$route.path.startsWith(path)
    }
  }
}
</script>

7.2 权限控制

router.beforeEach((to, from, next) => {
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
  const user = store.state.user
  
  if (requiresAuth && !user) {
    next('/login')
  } else {
    next()
  }
})

八、总结

本文详细介绍了在Vue项目中实现公共导航栏和侧边栏的多种方法：

1. 通过布局组件封装公共部分
2. 使用路由元信息和嵌套路由控制布局
3. Vue 2和Vue 3的不同实现方式
4. 结合状态管理实现动态交互
5. 响应式设计和过渡动画增强用户体验

通过这些技术，你可以构建出结构清晰、易于维护的Vue应用架构。根据项目需求选择适合的方案，并不断优化用户体验。

附录

推荐工具库

• vue-router
• pinia (Vue 3推荐状态管理)
• vuex (Vue 2状态管理)
• element-plus (UI组件库)

进一步学习资源

• Vue官方文档
• Vue Router高级用法
• 组件设计模式

”`