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

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

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

1. ページ名の統一

まずページ名を統一して小文字を使用し、 HomeAboutページを小文字に変更してから、 routerindex.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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • vue3 キャッシュページキープアライブと統合ルーティング処理の詳細な説明
  • Vue3.0とBootstrapを組み合わせてマルチページアプリケーションを作成する
  • Vue3.0はドロップダウンメニューのカプセル化を実装します
  • Vue3+TypeScriptは再帰メニューコンポーネントの完全な例を実装します
  • Vue2.x と Vue3.x のルーティングフックの違いの詳細な説明
  • Vue3ルーティングVueRouter4を使用する簡単な例
  • Vue2/vue3 ルーティング権限管理方法の例

<<:  CSSアニメーションを使用して背景のシームレスな無限ループを実装する例

>>:  一般的なMySQLストレージエンジンの長所と短所

推薦する

HTML+CSS+jQuery はスクリーンショットで検索ホットリストタブ効果を模倣します

コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...

Centos8 (最小インストール) Python3.8+pip のインストール方法に関するチュートリアル

Python8のインストールを最小化した後、Python3.8.1をインストールしました。オンライン...

MySQLのスリープ関数の特殊現象例の詳しい説明

序文MySQL のスリープ システム機能は、実用的な適用シナリオが少なく、通常は実験的なテストに使用...

Web プロジェクト開発 VUE の混合と継承の原則

目次ミキシンMixin ノート (重複名)ローカルミックスイングローバル ミックスイン定義とグローバ...

MySQLデータベース監視binlogを有効にする手順

序文多くの場合、ユーザーが自分のデータに対して実行する操作に基づいて何かを行う必要があります。たとえ...

ウェブデザイナーのウェブデザイン学習経験とスキルのまとめ

会社の影響力が拡大し、製品が改良され続けるにつれて、関連するイメージデザインもそれに追いつき、徐々に...

Linux での MySQL 8.0 インストール チュートリアル

この記事では、LinuxでMySQL 8.0をインストールする方法を紹介します。具体的な内容は次のと...

JavaScriptはクリックトグル機能を実装します

この記事の例では、クリックして切り替える機能を実装するためのJavaScriptの具体的なコードを参...

フロントエンドエンジニアが作ったクールなインタラクティブウェブサイトを推薦します

ウェブサイトリンク: http://strml.net/サミュエル・リード著ヒント: 昨日、Mome...

cobbler ベースの Linux システムを自動的にインストールする

1. コンポーネントをインストールする yum install epel-rpm-macros.no...

Linux の総合システム監視ツール dstat の詳細な例

オールラウンドなシステム監視ツール dstat dstat は、vmstat、iostat、nets...

jQueryは画像追従効果を実現します

この記事では、画像フォロー効果を実現するためのjQueryの具体的なコードを参考までに紹介します。具...

Linux コマンドで .sql ファイルをエクスポートおよびインポートする方法

この記事では、Linux コマンドを使用して .sql ファイルをエクスポートおよびインポートする方...

MySQLパラダイムの使用に関する詳細な説明

1. パラダイムこのパラダイムの英語名は Normal Form であり、1970 年代にリレーショ...

Reactプロジェクトで画像を導入するいくつかの方法

imgタグは画像を導入しますreactは実際にはjsリーダー関数を介してページをレンダリングするため...