vue写一个公共导航栏

好的，以下是一个简单的示例，供您参考：

1. 在 Vue 项目中创建一个组件，用于渲染公共导航栏，例如：

<template>
  <div class="navbar">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </div>
</template>

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

<style>
.navbar {
  background-color: #333;
  color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  margin-right: 10px;
}

a {
  color: #fff;
  text-decoration: none;
}
</style>

2. 在需要使用公共导航栏的页面中，通过引入该组件来渲染导航栏，例如：

<template>
  <div>
    <Navbar />
    <h1>Home Page</h1>
  </div>
</template>

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

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

这样，您就可以在不同的页面中复用公共导航栏组件了。