vue实现公共导航

实现公共导航的几种方法

在Vue项目中实现公共导航通常有以下几种方式，可以根据项目复杂度选择适合的方案：

使用全局组件

创建独立的导航组件并在需要的地方引入：

1. 创建Navbar.vue组件：

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

2. 在需要的页面中引入：

   
   <template>
   <div>
    <Navbar />
    <!-- 页面内容 -->
   </div>
   </template>

import Navbar from './components/Navbar.vue' export default { components: { Navbar } } ```

使用布局组件（Layout）

创建包含导航的布局组件，使子页面继承布局：

1. 创建Layout.vue：

   <template>
   <div>
    <Navbar />
    <slot /> <!-- 子页面内容将插入这里 -->
   </div>
   </template>

2. 在路由配置中使用：

   {
   path: '/',
   component: Layout,
   children: [
    { path: '', component: Home },
    { path: 'about', component: About }
   ]
   }

使用Vuex管理导航状态

对于需要动态控制的导航（如登录状态变化）：

1. 在Vuex中存储导航状态：

   state: {
   navItems: [
    { path: '/', name: 'Home' },
    { path: '/about', name: 'About' }
   ]
   }

2. 组件中通过计算属性获取：

   
   <template>
   <nav>
    <router-link 
      v-for="item in navItems" 
      :key="item.path"
      :to="item.path"
    >
      {{ item.name }}
    </router-link>
   </nav>
   </template>

import { mapState } from 'vuex' export default { computed: { ...mapState(['navItems']) } } ```

使用动态路由注入

对于需要权限控制的导航：

router.beforeEach((to, from, next) => {
  const allowedRoutes = getRoutesBasedOnUserRole()
  router.addRoutes(allowedRoutes)
  next()
})

样式与行为建议

• 为当前路由添加active样式：

  <router-link 
  active-class="active" 
  exact-active-class="exact-active"
  >

• 移动端响应式处理：

  

  @media (max-width: 768px) {
  nav {
    flex-direction: column;
  }
  }

选择哪种方式取决于项目需求，简单项目使用全局组件即可，复杂SPA建议采用布局组件+Vuex的方案。