vue写页面导航栏具体代码

### 回答1：
以下是一个简单的 Vue 页面导航栏代码示例：

<template>
  <nav>
    <ul>
      <li v-for="item in items" :key="item.text">
        <a :href="item.link">{{ item.text }}</a>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  data () {
    return {
      items: [
        { text: '首页', link: '/' },
        { text: '关于我们', link: '/about' },
        { text: '联系我们', link: '/contact' }
      ]
    }
  }
}
</script>

<style>
nav {
  background-color: #333;
  color: #fff;
  display: flex;
  justify-content: center;
  padding: 16px;
}

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

nav li {
  margin: 0 16px;
}

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

在上面的代码中，我们使用了 Vue 的模板语法来定义导航栏的 HTML 结构，并使用了 Vue 的数据驱动，通过 `v-for` 循环遍历数组 `items`，渲染出每一个导航项目。

### 回答2：
Vue是一款轻量级的JavaScript框架，用于构建用户界面。Vue中可以通过组件的方式来构建页面导航栏。

首先，在Vue项目中创建一个名为`Navbar.vue`的组件文件。该组件将被用于渲染页面导航栏。

在`Navbar.vue`文件中，我们需要定义导航栏的HTML模板，以及相关的样式和交互逻辑。

以下是一个简单的示例代码：

<template>
  <nav>
    <ul>
      <li @click="navigateTo('/home')">首页</li>
      <li @click="navigateTo('/about')">关于</li>
      <li @click="navigateTo('/contact')">联系我们</li>
    </ul>
  </nav>
</template>

<script>
export default {
  methods: {
    navigateTo(path) {
      // 在这里执行页面跳转，例如使用Vue Router进行路由导航
      this.$router.push(path);
    }
  }
}
</script>

<style scoped>
nav {
  background-color: #f5f5f5;
  padding: 10px;
}
ul {
  list-style-type: none;
  display: flex;
}
li {
  margin-right: 10px;
  cursor: pointer;
}
</style>

在`template`标签中，我们使用HTML定义了导航栏的结构，包含一个`nav`标签和一个包含导航链接的无序列表。

`@click`是Vue的内置指令，用于绑定点击事件。当点击导航链接时，会触发`navigateTo`方法。

在`script`标签中，我们使用`export default`将该组件导出为默认模块。在`methods`对象中定义了`navigateTo`方法，用于处理导航链接的点击事件。在该方法中，我们使用`this.$router.push(path)`实现页面的跳转。

`style`标签中的`scoped`属性表示该组件的样式只作用于当前组件，不会影响其他组件。

以上代码只是一个简单的示例，实际项目中需要根据需求进行修改和拓展。在项目中需要使用Vue Router库来实现路由功能，以使页面导航生效。