参考コード

  • <router-link/> を使ってページを遷移させる
  • これは vue-router を使う設定をしたので、読み込まずに使用できる
  • AppHeader にページ遷移の機能を実装する
  • AppHeader コンポーネントを App.vue に読み込む
/components/AppHeader.vue
<template>
  <div>
    <ul>
      <li>
        <router-link to="/">Top</router-link>
      </li>
      <li>
        <router-link to="/about">About</router-link>
      </li>
      <li>
        <router-link to="/members">Members</router-link>
      </li>
    </ul>
  </div>
</template>
App.js
<template>
  <div>
    <AppHeader/>
    <!-- この部分が切り替わる -->
    <router-view/>
  </div>
</template>

<script>
import AppHeader from "./components/AppHeader";
export default {
  components: {
    AppHeader
  }
};
</script>