vue.js顶部导航栏组件

可以使用Vue.js的组件化思想来实现一个顶部导航栏组件。以下是一个简单的实现例子：

<template>
  <nav class="navbar">
    <div class="navbar-brand">
      <a class="navbar-item" href="#">
        <!-- Logo 或者网站名称 -->
      </a>

      <!-- 右上角的汉堡菜单 -->
      <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </a>
    </div>

    <!-- 右上角的菜单 -->
    <div id="navbarBasicExample" class="navbar-menu">
      <div class="navbar-end">
        <a class="navbar-item" href="#">
          <!-- 导航链接1 -->
        </a>
        <a class="navbar-item" href="#">
          <!-- 导航链接2 -->
        </a>
        <a class="navbar-item" href="#">
          <!-- 导航链接3 -->
        </a>
      </div>
    </div>
  </nav>
</template>

<script>
export default {
  name: 'Navbar',
  data() {
    return {
      // 是否打开右上角的菜单
      isActive: false
    }
  },
  methods: {
    toggleMenu() {
      this.isActive = !this.isActive;
    }
  }
}
</script>

<style scoped>
/* 样式可以根据自己的需求进行调整 */
</style>

然后在需要使用的页面中引入该组件即可：

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

<script>
import Navbar from '@/components/Navbar.vue';

export default {
  name: 'Home',
  components: {
    Navbar
  }
}
</script>