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 をよろしくお願いいたします。

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