vue实现公共导航

Vue 实现公共导航的方法

公共导航通常用于多个页面共享的导航栏或菜单，以下是几种常见的实现方式：

使用组件化方式创建公共导航

创建独立的导航组件，在需要的页面中引入并注册使用。

<!-- NavBar.vue -->
<template>
  <nav>
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-link to="/contact">联系我们</router-link>
  </nav>
</template>

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

在父组件中使用：

<template>
  <div>
    <NavBar />
    <!-- 其他内容 -->
  </div>
</template>

<script>
import NavBar from './components/NavBar.vue'

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

使用布局组件

创建布局组件包含导航栏和内容区域，通过插槽实现内容替换。

<!-- Layout.vue -->
<template>
  <div>
    <NavBar />
    <main>
      <slot></slot>
    </main>
  </div>
</template>

<script>
import NavBar from './NavBar.vue'

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

在路由配置中使用：

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

使用 Vue Router 的导航守卫

在路由配置中添加导航守卫，实现权限控制或导航状态管理。

router.beforeEach((to, from, next) => {
  document.title = to.meta.title || '默认标题'
  next()
})

动态导航实现

根据用户权限或状态动态生成导航菜单。

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

<script>
export default {
  data() {
    return {
      navItems: [
        { path: '/', title: '首页' },
        { path: '/about', title: '关于' }
      ]
    }
  }
}
</script>

使用状态管理维护导航状态

结合 Vuex 管理导航状态，实现跨组件共享数据。

// store.js
export default new Vuex.Store({
  state: {
    navItems: [
      { path: '/', title: '首页' },
      { path: '/about', title: '关于' }
    ]
  }
})

组件中使用：

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

以上方法可根据项目需求选择或组合使用，组件化方式适合大多数场景，布局组件适合多页面共享相同布局，动态导航和状态管理适合复杂应用场景。