1. メニューをクリックしてジャンプ1. ページ名の統一まずページ名を統一して小文字を使用し、 サンプルコードは次のとおりです。 '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. 管理ページを追加する
サンプルコードは次のとおりです。 <テンプレート> <div class="about"> <h1>電子書籍管理ページ</h1> </div> </テンプレート> 3. ルートを追加する
サンプルコードは次のとおりです。 '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', }); </スクリプト> 知識ポイント: 以下のように 2. 実際の効果以下のように再コンパイルして起動します。 Vue3 のページ、メニュー、ルートの使い方についてはこれで終了です。Vue3 のページ、メニュー、ルートの使い方についてさらに詳しく知りたい方は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: CSSアニメーションを使用して背景のシームレスな無限ループを実装する例
コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...
Python8のインストールを最小化した後、Python3.8.1をインストールしました。オンライン...
序文MySQL のスリープ システム機能は、実用的な適用シナリオが少なく、通常は実験的なテストに使用...
目次ミキシンMixin ノート (重複名)ローカルミックスイングローバル ミックスイン定義とグローバ...
序文多くの場合、ユーザーが自分のデータに対して実行する操作に基づいて何かを行う必要があります。たとえ...
会社の影響力が拡大し、製品が改良され続けるにつれて、関連するイメージデザインもそれに追いつき、徐々に...
この記事では、LinuxでMySQL 8.0をインストールする方法を紹介します。具体的な内容は次のと...
この記事の例では、クリックして切り替える機能を実装するためのJavaScriptの具体的なコードを参...
ウェブサイトリンク: http://strml.net/サミュエル・リード著ヒント: 昨日、Mome...
1. コンポーネントをインストールする yum install epel-rpm-macros.no...
オールラウンドなシステム監視ツール dstat dstat は、vmstat、iostat、nets...
この記事では、画像フォロー効果を実現するためのjQueryの具体的なコードを参考までに紹介します。具...
この記事では、Linux コマンドを使用して .sql ファイルをエクスポートおよびインポートする方...
1. パラダイムこのパラダイムの英語名は Normal Form であり、1970 年代にリレーショ...
imgタグは画像を導入しますreactは実際にはjsリーダー関数を介してページをレンダリングするため...