vue实现动态导航栏
Vue 实现动态导航栏的方法
基于路由配置动态生成
在 Vue 项目中，可以利用路由配置动态生成导航栏。Vue Router 的路由信息可以通过 this.$router.options.routes 或 useRouter() 获取。
// router/index.js
const routes = [
{ path: '/', name: 'Home', meta: { title: '首页' } },
{ path: '/about', name: 'About', meta: { title: '关于' } }
]<template>
<nav>
<router-link
v-for="route in visibleRoutes"
:key="route.path"
:to="route.path"
>
{{ route.meta.title }}
</router-link>
</nav>
</template>
<script>
export default {
computed: {
visibleRoutes() {
return this.$router.options.routes.filter(route => !route.meta?.hidden)
}
}
}
</script>通过 API 动态获取导航数据
导航数据也可以从后端 API 动态获取，适合权限控制的场景。
// 假设 API 返回格式: [{ path: '/', title: '首页' }, ...]
async function fetchNavItems() {
const response = await axios.get('/api/navigation')
return response.data
}<script>
export default {
data() {
return {
navItems: []
}
},
async created() {
this.navItems = await fetchNavItems()
}
}
</script>结合 Vuex/Pinia 状态管理
对于复杂的导航状态管理，可以使用状态管理工具存储导航数据。
// store/modules/navigation.js
export default {
state: () => ({
items: []
}),
actions: {
async loadNavItems({ commit }) {
const items = await fetchNavItems()
commit('SET_ITEMS', items)
}
}
}响应式导航栏实现
实现响应式导航栏需要结合 CSS 媒体查询和 Vue 的状态控制。
<template>
<button @click="toggleMobileNav">菜单</button>
<nav :class="{ 'mobile-active': mobileNavOpen }">
<!-- 导航项 -->
</nav>
</template>
<script>
export default {
data() {
return {
mobileNavOpen: false
}
},
methods: {
toggleMobileNav() {
this.mobileNavOpen = !this.mobileNavOpen
}
}
}
</script>
<style>
@media (max-width: 768px) {
nav:not(.mobile-active) {
display: none;
}
}
</style>动态高亮当前路由
使用 Vue Router 的 router-link-active 类或自定义逻辑实现高亮效果。
<template>
<router-link
v-for="item in navItems"
:key="item.path"
:to="item.path"
:class="{ 'active': $route.path === item.path }"
>
{{ item.title }}
</router-link>
</template>
<style>
.active {
font-weight: bold;
color: #42b983;
}
</style>权限控制实现
根据用户角色过滤导航项，实现权限控制。
// 过滤函数示例
function filterByPermission(items, userRole) {
return items.filter(item => {
return !item.meta?.roles || item.meta.roles.includes(userRole)
})
}<script>
export default {
computed: {
allowedNavItems() {
return filterByPermission(this.navItems, this.$store.state.user.role)
}
}
}
</script>以上方法可以单独使用或组合使用，根据项目需求选择最适合的实现方式。动态导航栏的核心是将导航数据与界面分离，通过数据驱动视图变化。
