用vue组件做一个带导航栏的网页代码

在Vue.js中，创建一个带导航栏的网页可以分为几个步骤。首先，你需要安装Vue CLI（命令行工具），然后通过它构建项目结构。这里是一个简单的示例，包括基本的导航栏组件和一个主内容区域：

1. 安装依赖并初始化项目：

npm install -g @vue/cli
vue create my-project
cd my-project

2. 创建一个导航栏组件 (Navbar.vue)：

<template>
  <nav class="navbar">
    <ul>
      <li v-for="(item, index) in menuItems" :key="index">
        <router-link :to="{ name: item.route, params: { id: item.id }}" :exact="item.exact">{{ item.name }}</router-link>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  name: 'Navbar',
  props: {
    menuItems: {
      type: Array,
      required: true
    }
  }
}
</script>

<style scoped>
/* 样式省略 */
</style>

这里我们使用了`v-for`遍历数据，并通过`router-link`连接到对应的路由。

3. 主页面组件 (App.vue)：

<template>
  <div id="app">
    <Navbar :menuItems="navbarItems"/>
    <router-view></router-view>
  </div>
</template>

<script>
import Navbar from '@/components/Navbar.vue'
export default {
  name: 'App',
  components: {
    Navbar
  },
  data() {
    return {
      navbarItems: [
        { name: 'Home', route: '/', exact: true },
        { name: 'About', route: '/about', exact: false },
        // 更多菜单项...
      ]
    }
  }
}
</script>

4. 路由配置 (router/index.js):

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const routes = [
  { path: '/', component: HomeComponent },
  { path: '/about', component: AboutComponent } /* 添加更多路由 */
]

export default new Router({
  routes
})

别忘了导入并设置路由，以及自定义相应的页面组件（如 HomeComponent 和 AboutComponent）。