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部)

推薦する

JavaScript キャンバスでカラフルな太陽のハロー効果を実現

この記事では、カラフルな太陽のハロー効果を実現するためのJavaScriptキャンバスの具体的なコー...

WindowsにJDK8をインストールする方法

1. ダウンロード: http://www.oracle.com/technetwork/java/...

MySQLを水平から垂直に、垂直から水平に変換する方法

データの初期化 `test_01` が存在する場合はテーブルを削除します。 テーブル「test_01...

モバイルデバイスでのフリーズ問題に対する CSS3 ソリューション (アニメーション パフォーマンスの最適化)

1. CSS、jQuery、Canvasを使用してアニメーションを作成する1. キャンバス利点: ...

Vueコンポーネントが相互に値を転送する方法の詳細な説明

目次概要1. 親コンポーネントが子コンポーネントに値を渡す2. 子コンポーネントが親コンポーネントに...

Linux システムのユーザー管理コマンドの概要

ユーザーとグループの管理1. ユーザーとグループの基本概念ユーザーとグループ:システム上のすべてのプ...

Mac で Docker を使用して Oracle をデプロイする方法

Mac で Docker を使用して Oracle をデプロイする方法まずdockerをインストール...

Tomcatでcatalina.batがUTF-8に設定されている場合、コンソールに文字化けした文字が表示されます

1. catalina.bat は UTF-8 に設定する必要があります。UTF-8 に設定しないと...

Element-UIの10の驚くべきトリックのまとめ

目次el-scrollbar スクロールバーel-uploadはクリックをシミュレートしますel-s...

Youku 動画から 30 秒の広告コードを削除する 2 つの方法

誰もがこんな気持ちになったことがあると思います。30 秒の広告が入った動画を見ると、とても不快に感じ...

MySQLのトランザクション特性とレベル原則の分析

1. トランザクションとは何ですか?データベース トランザクション (略称: トランザクション) は...

Linux コマンドラインで電卓を使用する 5 つのコマンド

みなさんこんにちは。私は梁旭です。 Linux を使用するときに、計算を行う必要がある場合があり、そ...

Nginx 設定場所のマッチング優先順位の簡単な分析

序文Nginx 構成のサーバー ブロック内の場所は、リクエスト URI を一致させるために使用され、...

MySQL 同期遅延が発生したときに Seconds_Behind_Master が 0 のままになる理由

目次問題の説明原理分析問題分析拡大する総括する問題の説明ユーザーはプライマリ データベースに対して変...

メタタグにおける http-equiv 属性の使用の概要

metaはhtml言語のhead領域にある補助タグです。おそらく、これらのコードは不要だと思うかもし...