使用v-show指令控制页面1主页及页面2关于页面的显示与隐藏。为超链接添加点击事件响应实现：①点击主页的About显示关于页面②点击关于页面的返回主页显示主页。使用指令修饰符实现点击以上超链接阻止页面跳转。

<template>
  <div>
    <nav>
      <ul>
        <li><a href="#" v-show="currentPage === 'home'" v-on:click.prevent="showAboutPage()">About</a></li>
        <li><a href="#" v-show="currentPage === 'about'" v-on:click.prevent="showHomePage()">返回主页</a></li>
      </ul>
    </nav>
    <div v-show="currentPage === 'home'">
      <h1>欢迎访问主页</h1>
      <p>这是主页的内容。</p>
    </div>
    <div v-show="currentPage === 'about'">
      <h1>关于我们</h1>
      <p>这是关于页面的内容。</p>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentPage: 'home'
    }
  },
  methods: {
    showAboutPage() {
      this.currentPage = 'about'
    },
    showHomePage() {
      this.currentPage = 'home'
    }
  }
}
</script>