Vue3 ページ、メニュー、ルートの使用

'vue-router' から {createRouter、createWebHistory、RouteRecordRaw} をインポートします。
'../views/home.vue' から Home をインポートします。
'../views/about.vue' から About をインポートします。

const ルート: Array<RouteRecordRaw> = [
  {
    パス： '/'、
    名前: 'ホーム'、
    コンポーネント: ホーム
  },
  {
    パス: '/about',
    名前: 'About'、
    コンポーネント: について
    // ルートレベルのコード分割
    // これにより、このルート用の別のチャンク (about.[hash].js) が生成されます
    //遅延読み込みのため削除しました}
]

const ルーター = createRouter({
  履歴: createWebHistory(process.env.BASE_URL)、
  ルート
})

デフォルトルーターをエクスポートする

<テンプレート>
  <div class="about">
    <h1>電子書籍管理ページ</h1>
  </div>
</テンプレート>

'vue-router' から {createRouter、createWebHistory、RouteRecordRaw} をインポートします。
'../views/home.vue' から Home をインポートします。
'../views/about.vue' から About をインポートします。
'../views/admin/admin-ebook.vue' から AdminEbook をインポートします。

const ルート: Array<RouteRecordRaw> = [
  {
    パス： '/'、
    名前: 'ホーム'、
    コンポーネント: ホーム
  },
  {
    パス: '/about',
    名前: 'About'、
    コンポーネント: について
  },
  {
    パス: '/admin/admin-ebook',
    名前: 'AdminEbook',
    コンポーネント: AdminEbook
  }
]

const ルーター = createRouter({
  履歴: createWebHistory(process.env.BASE_URL)、
  ルート
})

デフォルトルーターをエクスポートする

<テンプレート>
    <a-layout-headerクラス="header">
      <div class="logo" />
      <a-メニュー
          テーマ="ダーク"
          モード="水平"
          :style="{ 行の高さ: '64px' }"
      >
        <a-メニュー項目キー="/">
          <router-link to="/">ホーム</router-link>
        </a-メニュー項目>
        <a-menu-item キー="/admin/admin-ebook">
          <router-link to="/admin/admin-ebook">電子書籍管理ページ</router-link>
        </a-メニュー項目>
        <a-メニュー項目キー="3">
          <router-link to="/about">当社について</router-link>
        </a-メニュー項目>
      </a-メニュー>
    </a-レイアウト-ヘッダー>
</テンプレート>

<script lang="ts">
'vue' から {defineComponent} をインポートします。

エクスポートデフォルトdefineComponent({
  名前: 'TheHeader',
});
</スクリプト>