帮我写一个主界面中心包含三个页面的跳转

好的，下面是一个简单的主界面包含三个页面的跳转的 Vue 代码示例：

<template>
  <div class="main-page">
    <nav>
      <ul>
        <li @click="activePage = 'home'" :class="{active: activePage === 'home'}">首页</li>
        <li @click="activePage = 'about'" :class="{active: activePage === 'about'}">关于我们</li>
        <li @click="activePage = 'contact'" :class="{active: activePage === 'contact'}">联系我们</li>
      </ul>
    </nav>
    <div class="page-content">
      <div v-if="activePage === 'home'" class="home-page">
        <h1>欢迎来到首页</h1>
        <p>这里是首页的内容</p>
      </div>
      <div v-if="activePage === 'about'" class="about-page">
        <h1>关于我们</h1>
        <p>这里是关于我们的内容</p>
      </div>
      <div v-if="activePage === 'contact'" class="contact-page">
        <h1>联系我们</h1>
        <p>这里是联系我们的内容</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activePage: "home"
    };
  }
};
</script>

<style>
.main-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

nav ul {
  list-style-type: none;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

nav li {
  cursor: pointer;
}

nav li.active {
  color: #f00;
}

.home-page,
.about-page,
.contact-page {
  display: none;
}

.home-page {
  display: block;
}

.page-content {
  border: 1px solid #ccc;
  padding: 20px;
}
</style>

这个示例包含了一个导航栏和三个页面，点击导航栏上的链接可以切换页面。您可以根据自己的需求进行修改和扩展。希望对您有所帮助。