vue实现公共导航
Vue 实现公共导航的方法
在 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>
<style scoped>
nav {
background: #333;
padding: 1rem;
}
router-link {
color: white;
margin-right: 1rem;
}
</style>全局注册导航组件
在 main.js 或入口文件中全局注册导航组件，避免重复导入。
import Vue from 'vue';
import NavBar from './components/NavBar.vue';
Vue.component('NavBar', NavBar);在布局中使用导航
在根组件（如 App.vue）或布局组件中嵌入导航栏，确保其显示在所有页面顶部。
<template>
<div id="app">
<NavBar />
<router-view />
</div>
</template>动态导航与状态管理
若导航需根据用户登录状态动态变化，可通过 Vuex 或组合式 API 管理状态。
<template>
<nav>
<router-link to="/">首页</router-link>
<router-link v-if="isLoggedIn" to="/dashboard">仪表盘</router-link>
<router-link v-else to="/login">登录</router-link>
</nav>
</template>
<script>
import { computed } from 'vue';
import { useStore } from 'vuex';
export default {
setup() {
const store = useStore();
const isLoggedIn = computed(() => store.state.isLoggedIn);
return { isLoggedIn };
}
};
</script>响应式设计
通过 CSS 媒体查询或 Vue 的响应式工具（如 vue-responsive）适配移动端。
@media (max-width: 768px) {
nav {
flex-direction: column;
}
}路由高亮
使用 vue-router 的 active-class 属性标记当前活跃路由。
<router-link to="/" active-class="active">首页</router-link>样式优化
通过 SCSS 或 CSS 变量统一管理导航样式，提升可维护性。
:root {
--nav-bg: #333;
--nav-link-color: white;
}
nav {
background: var(--nav-bg);
a {
color: var(--nav-link-color);
}
}通过以上步骤，可实现一个复用性强、功能完善的公共导航组件。根据项目需求，可进一步扩展如权限控制、多级菜单等功能。
