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

1. メニューをクリックしてジャンプ

1. ページ名の統一

まずページ名を統一して小文字を使用し、 HomeとAboutページを小文字に変更してから、 routerのindex.ts変更します。

サンプルコードは次のとおりです。

'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)、
  ルート
})

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

2. 管理ページを追加する

views/adminの下にadmin-ebook.vueというページを作成します。

サンプルコードは次のとおりです。

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

3. ルートを追加する

router内のindex.tsコンテンツを再度変更します。

サンプルコードは次のとおりです。

'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)、
  ルート
})

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

4. メニューでルートをバインドする

ヘッダーで変更します。サンプルコードは次のとおりです。

<テンプレート>
    <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',
});
</スクリプト>

知識ポイント:

以下のようにrouter-linkを使用してリダイレクトします: <router-link to="/"> Home </router-link>

2. 実際の効果

以下のように再コンパイルして起動します。

Vue3 のページ、メニュー、ルートの使い方についてはこれで終了です。Vue3 のページ、メニュー、ルートの使い方についてさらに詳しく知りたい方は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: