vue.js ルーターのネストされたルートの実例

vue.js ルーターのネストされたルートの実例

序文

Vue.js シングルページ アプリケーション (SPA) がかなり複雑になると、Vue ルーターとネストされたルートが必要になります。ネストされたルートにより、相互にネストされたより複雑なユーザー インターフェイスとコンポーネントが可能になります。 Vue Router のネストされたルートの有用性を示すために、比較的単純なユースケースを作成しましょう。

Vue CLI での設定

まだインストールされていない場合は、次のコマンドを実行して Vue CLI をグローバルにインストールします。

$ npm インストール -g @vue/cli

または

$ 糸グローバル追加 @vue/cli

これで、コマンドラインから vue コマンドを実行できるようになりました。 alligator-nest という Vue アプリを作成しましょう。

$ vue ワニの巣を作成します

プロンプトでデフォルトのプリセットを選択します(Enter キーを押します)。その後、次のコマンドを実行します。

$ npm インストール vue-router

次に、任意のエディターで alligator-nest ディレクトリを開きます。

基本コード

次の CSS は、UI の要素を配置するのに役立ちます。これを public/ フォルダーにスタイルシート ファイルとして追加し、public/index.html で参照します。これを実現するには、CSS グリッドを使用します。

グリッド

.行1 {
  グリッド行開始: 1;
  グリッド行の終了: 2;
}

.行12 {
  グリッド行開始: 1;
  グリッド行の終了: 3;
}

.row123 {
  グリッド行開始: 1;
  グリッド行の終了: 4;
}

.行2 {
  グリッド行開始: 2;
  グリッド行の終了: 3;
}

.行23 {
  グリッド行開始: 2;
  グリッド行の終了: 4;
}

.行3 {
  グリッド行開始: 3;
  グリッド行の終了: 4;
}

.col1 {
  グリッド列開始: 1;
  グリッド列の終了: 2;
}

.col12 {
  グリッド列開始: 1;
  グリッド列の終了: 3;
}

.col123 {
  グリッド列開始: 1;
  グリッド列の終了: 4;
}

.col1234 {
  グリッド列開始: 1;
  グリッド列の終了: 5;
}

.col2 {
  グリッド列開始: 2;
  グリッド列の終了: 3;
}

.col23 {
  グリッド列開始: 2;
  グリッド列の終了: 4;
}

.col234 {
  グリッド列開始: 2;
  グリッド列の終了: 5;
}

.col3 {
  グリッド列開始: 3;
  グリッド列の終了: 4;
}

.col34 {
  グリッド列開始: 3;
  グリッド列の終了: 5;
}

.col4 {
  グリッド列開始: 4;
  グリッド列の終了: 5;
}

次に、vue-cli によって追加されたデフォルト ファイルにいくつか変更を加えてみましょう。

src/components フォルダから HelloWorld.vue を削除し、src/App.vue からそれに関連するすべてのものを削除します。 App.vue の HTML マークアップと CSS スタイルに次の変更を加えます。

<テンプレート>
  <div id="アプリ">
    <h1 class="row1 col12">ワニの巣</h1>
    <a class="row1 col3">旅行</a>
    <a class="row1 col4">概要</a>
    <div class="row2 col234"></div>
  </div>
</テンプレート>
html、本文{
  高さ:100vh;
  幅:100vw;
  パディング: 0;
  マージン: 0;
}

#アプリ {
  フォントファミリー: Avenir、Helvetica、Arial、sans-serif;
  -webkit-font-smoothing: アンチエイリアス;
  -moz-osx-font-smoothing: グレースケール;
  色: #2c3e50;
  パディング: 2%;
  高さ: 100%;
  表示: グリッド;
  グリッドテンプレート行: 20% 80%;
  グリッドテンプレート列: 25% 25% 25% 25%;
}

プロジェクトのルートで npm run serve を実行すると、ブラウザで localhost:8080 にマウスを移動してスケルトン レイアウトを確認できます。これらの display:grid プロパティは便利です!これでルートの作成を開始できます。

Vueルーターの登場

/components フォルダーに AboutPage.vue というコンポーネントを作成します。次のようになります:

<テンプレート>
  <div>
    <h2>について</h2>
    <p>ワニは恐竜の時代にも存在していました。</p>
  </div>
</テンプレート>

<スクリプト>
  エクスポートデフォルト{
    名前: 'AboutPage',
  }
</スクリプト>

<スタイルスコープ>
  
</スタイル>

これで、main.js ファイルには /about ルートが必要になります。こんな感じです。

'vue-router' から VueRouter をインポートします。
'vue' から Vue をインポートします。
'./App.vue' からアプリをインポートします。

Vue.config で productionTip を false に設定します。

'vue-router' から VueRouter をインポートします。
Vue.use(VueRouter);

'./components/AboutPage.vue' から AboutPage をインポートします。

定数ルート = [
  { パス: '/about'、コンポーネント: AboutPage },
]

const ルーター = 新しい VueRouter({
  ルート
})

新しいVue({
  レンダリング: h => h(App),
  ルーター
}).$mount('#app');

最後に、App.vue に戻り、「About」アンカー タグを、属性 to="/about" を持つ <router-link> タグに変更します。次に、2 番目の div を <router-view> タグに変更します。グリッド配置クラスのプロパティは変更しないでください。

これで、「About」ページのルーティングが処理された、完全に機能するサイト スケルトンが完成しました。

ここではルーティングに重点を置いているため、スタイル設定にはあまり時間をかけません。しかし、Travels ページをもう少し洗練されたものにしたいと思っています。

まず、AboutPage を作成したのと同じ方法で TravelPage を作成します。 main.js で参照します。

また、最終的に TravelPage.vue にネストされる次の 2 つのコンポーネントを作成する必要があります。

旅行アメリカページ.vue

<テンプレート>
  <div>
    <p>ワニはアメリカのルイジアナ州とフロリダ州に生息しています。</p>
  </div>
</テンプレート>

<スクリプト>
  エクスポートデフォルト{
    名前: 'TravelAmericaPage'
  }
</スクリプト>

<スタイルスコープ>
</スタイル>

旅行中国ページ.vue

<テンプレート>
  <div>
    <p>ワニは中国の揚子江流域に生息しています。</p>
  </div>
</テンプレート>

<スクリプト>
  エクスポートデフォルト{
    名前: 'TravelChinaPage'
  }
</スクリプト>

<スタイルスコープ>

</スタイル>

ネストされたルートの設定

ここで、main.js と TravelPage.vue の両方を更新して、子を使用してこれらのネストされたルートを参照するようにします。 main.js を更新して、ルート定数の次の定義を追加する必要があります。

定数ルート = [
  {
    パス: '/travel'、コンポーネント: TravelPage、
    子供たち: [
      { パス: '/travel/america'、コンポーネント: TravelAmericaPage },
      { パス: '/travel/china'、コンポーネント: TravelChinaPage}
    ]
  },
  {
    パス: '/about'、コンポーネント: AboutPage
  }
];

子のネストは無期限に継続できることに注意してください。

TravelPage.vue は次のように記述できます。

旅行ページ.vue

<テンプレート>
  <div id="旅行">
    <h2 class="row1">旅行</h2>
    <div class="flex-container row2">
      <router-link to="/travel/america">アメリカ</router-link>
      <router-link to="/travel/china">中国</router-link>
    </div>
    <ルータービュークラス="row3"></ルータービュー>
  </div>
</テンプレート>

<スクリプト>
  エクスポートデフォルト{
    名前: 'TravelPage'
  }
</スクリプト>

<スタイルスコープ>
div {
  テキスト配置: 中央;
}

#旅行 {
  表示: グリッド;
  グリッドテンプレート行: 20% 40% 40%;
}

.flex-コンテナ{
  ディスプレイ: フレックス;
  コンテンツの両端揃え: スペースを空ける;
}
</スタイル>

localhost:8080 を確認すると、Travels ページに 2 つのサブページがあることがわかります。いずれかのリンクをクリックすると、それに応じて URL が更新されます。

要約する

このチュートリアルがネストされたルートの使用方法を理解するのに役立つことを願っています。

このトピックに関する追加の注意事項 - path:'/location/:id' などの動的セグメントを使用してルートを定義できます。次に、それらのルートのビューで、その ID を this.$route.params として参照できます。この機能は、Web サイトやアプリで特定の種類のデータ (ユーザー、画像など) をさらに表示したい場合に便利です。

これで、vue.js ルーターのネストされたルーティングに関するこの記事は終了です。vue.js のネストされたルーティングに関する関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • vue.js ルーターのネストされたルート
  • vue-routerネストルーティングが応答しない問題を解決する
  • ネストされたルーティングを実装するvue-routerの説明
  • Vue ルーターの基本的な使い方(動的ルーティング、ネストルーティング)の総合分析
  • vue-router のネストされたルーティングとは何かを説明します
  • Vue-router ネストルーティングの詳細な説明

<<:  Nginx でバージョン番号と Web ページのキャッシュ時間を非表示にする方法

>>:  MySQLの基本操作を詳しく解説(第2部)

推薦する

MySql のインデックス、ロック、トランザクションの知識ポイントのまとめ

この記事では、MySql のインデックス、ロック、トランザクションに関する知識のポイントをまとめてい...

html2canvasで画像が正常にキャプチャできない時の解決方法

質問まず、私が遭遇した問題についてお話しします。まず、そういった需要があるわけです。フロントエンドは...

CPU、マシンモデル、メモリなどの情報を表示するLinuxシステム

システムメンテナンス中は、いつでも CPU 使用率を確認し、対応する情報に基づいてシステムの状態を分...

CSS を使用して HTML フォーム コントロールを美しくする詳細な例 (フォームの美化)

1. HTML送信ボタンと下部ボタンの基本構文構造1. HTML送信ボタン入力タグで type=&...

CSS フロントエンドの知識ポイントのまとめ(必読)

1. CSS の概念: (カスケーディング スタイル シート)利点: 1. コンテンツとプレゼンテ...

時間に基づいて日付をクエリするためのMySQL最適化テクニック

たとえば、昨日新規登録されたユーザーを照会するには、次の 2 つの書き方があります。 説明する ch...

Linux で g++ を使用してプログラムをコンパイルする際の -I (大文字の i)、-L (大文字の l)、-l (小文字の l) の機能の詳細な説明

初心者の Linux ユーザーとして、私は単純なgcc/g++操作を何度も使用してきましたが、少し複...

単一マシン上での Tomcat の複数インスタンスの実装

1. はじめにまず、1 台のマシンで複数のインスタンスを使用する理由という質問に答える必要があります...

VueはSplitを使用して、ユニバーサルドラッグアンドスライドパーティションパネルコンポーネントをカプセル化します。

目次序文始める基本レイアウトデータバインディングイベントバインディング最適化ジッター問題を最適化する...

Tomcat+Mysql の高同時実行構成の最適化の説明

1.Tomcatの最適化構成(1)Tomcatのcatalina.batを変更するJavaをサーバー...

MySQL での mysqladmin 日常管理コマンドの概要 (必読)

mysqladmin ツールの使用形式は次のとおりです。 mysqladmin [オプション] コ...

MySQL の基本ステートメントを最適化するための 10 の原則の概要

序文データベースの応用において、プログラマーは継続的な実践を通じて多くの経験を積んできました。これら...

Windows Server 2008 R2 リモート デスクトップのポート 3389 を変更する方法

Windows サーバー リモート デスクトップのデフォルトのポート番号は 3389 です。職場でサ...

分散監視システムZabbixはSNMPとJMXチャネルを使用してデータを収集します

前回の記事では、Zabbix のパッシブ、アクティブ、Web 監視に関するトピックについて学習しまし...

Vue2 キューブUI 時間セレクターの詳細な説明

目次序文1. 需要と効果必要効果2. コードの実装index.vue(html)日付方法テスト結果3...