vue实现sdk导航栏

Vue 实现 SDK 导航栏

使用 Vue Router 实现基础导航

安装 Vue Router 依赖包
npm install vue-router

在项目中创建路由配置文件

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import Features from '../views/Features.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/features', component: Features }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

在主入口文件挂载路由

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

创建导航栏组件

新建 NavBar.vue 组件

<template>
  <nav>
    <router-link to="/">Home</router-link>
    <router-link to="/features">Features</router-link>
  </nav>
</template>

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

<style scoped>
nav {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: #f0f0f0;
}
.router-link-active {
  font-weight: bold;
}
</style>

实现动态导航菜单

通过路由元信息配置导航项

const routes = [
  {
    path: '/',
    component: Home,
    meta: { navTitle: '首页' }
  },
  {
    path: '/features',
    component: Features,
    meta: { navTitle: '功能特性' }
  }
]

修改导航组件使用动态渲染

<template>
  <nav>
    <router-link
      v-for="route in visibleRoutes"
      :key="route.path"
      :to="route.path"
    >
      {{ route.meta.navTitle }}
    </router-link>
  </nav>
</template>

<script>
export default {
  computed: {
    visibleRoutes() {
      return this.$router.options.routes.filter(
        route => route.meta && route.meta.navTitle
      )
    }
  }
}
</script>

添加导航栏交互功能

实现下拉菜单功能

<template>
  <nav>
    <div class="nav-item" v-for="group in menuGroups" :key="group.title">
      <button @click="toggleMenu(group)">
        {{ group.title }}
      </button>
      <div v-if="activeMenu === group.title" class="dropdown">
        <router-link
          v-for="item in group.items"
          :key="item.path"
          :to="item.path"
        >
          {{ item.title }}
        </router-link>
      </div>
    </div>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      activeMenu: null,
      menuGroups: [
        {
          title: '产品',
          items: [
            { path: '/features', title: '核心功能' },
            { path: '/pricing', title: '价格方案' }
          ]
        }
      ]
    }
  },
  methods: {
    toggleMenu(group) {
      this.activeMenu = this.activeMenu === group.title ? null : group.title
    }
  }
}
</script>

<style>
.dropdown {
  position: absolute;
  background: white;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
</style>

响应式导航栏实现

添加移动端适配

<template>
  <nav>
    <button @click="toggleMobileMenu">菜单</button>
    <div :class="{ 'mobile-hidden': !showMobileMenu }">
      <router-link to="/">首页</router-link>
      <router-link to="/features">功能</router-link>
    </div>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      showMobileMenu: false
    }
  },
  methods: {
    toggleMobileMenu() {
      this.showMobileMenu = !this.showMobileMenu
    }
  }
}
</script>

<style>
@media (max-width: 768px) {
  .mobile-hidden {
    display: none;
  }
  nav {
    flex-direction: column;
  }
}
</style>

导航栏权限控制

根据用户权限显示不同导航项

<script>
export default {
  computed: {
    filteredRoutes() {
      const userRole = 'admin' // 实际从store或API获取
      return this.$router.options.routes.filter(route => {
        return !route.meta || !route.meta.roles || route.meta.roles.includes(userRole)
      })
    }
  }
}
</script>

路由配置添加权限元信息

{
  path: '/admin',
  component: Admin,
  meta: { roles: ['admin'] }
}