著者は、 Write for DOnations プログラムの一環として、 Open Sourcing MentalIllnessを選択して寄付を受け取りました。

序章

ほとんどのWebサイトまたはアプリケーションには、静的または動的に生成される複数のHTMLページがあります。 従来のWebサイトでは、ドキュメントオブジェクトモデル(DOM)が1つと、URLルートごとに1つのページがあります。 ただし、シングルページアプリケーションでは、すべての「ページ」またはビューが1つのHTMLページ内にレンダリングされます。 Vue.jsなどのユーザーインターフェイス(UI)フレームワークは、仮想DOMを使用して、必要に応じてこれらのページとコンポーネントをレンダリングします。 この仮想DOM[X20X]は、元のDOMの JavaScript 表現であり、クライアントが更新するのがはるかに簡単です。

ユーザーが単一ページのアプリケーションにアクセスすると、そのアプリケーションはそれ自体を仮想DOMと比較し、変更されたWebページの部分のみを再レンダリングします。 この手法は、リンクをクリックしたときにページが白く点滅するのを防ぎます。 Webページにヘッダー、コンテンツ、フッターの3つのセクションがあるとします。 別のURLに移動すると、Vueはページ間で変更されたアプリケーションのコンテンツ領域のみをレンダリングします。

Vue.jsでは、ファーストパーティライブラリ VueRouterを使用して複数のビューを作成できます。 このルーターは、URLへのビューとの関連付けを行います。 このチュートリアルでは、Vueルーターライブラリを追加し、それをプロジェクトに統合し、動的に生成されるルートを作成する方法を学習します。 また、開発者として利用できるさまざまなタイプのルートについても学習します。 完了すると、さまざまな方法を使用してナビゲートできるアプリケーションが作成されます。

これらの概念を説明するために、空港情報を表示する小さなアプリケーションを作成します。 ユーザーが空港カードをクリックすると、アプリケーションは空港の詳細の動的ビューに移動します。 これを行うために、プログラムはURLパラメータを読み取り、そのパラメータに基づいてデータを除外します。

前提条件

このチュートリアルを完了するには、次のものが必要です。

ステップ1—サンプルアプリケーションの設定

Vueルーターを学習するために構築しようとしているアプリケーションには、いくつかの初期データが必要です。 このステップでは、チュートリアルの後半でVueアプリにアクセスできるように、このデータを作成して構造化します。

このデータセットを追加するには、を作成する必要があります data ディレクトリを作成し、名前を付けてJavaScriptファイルを作成します airports.js. あなたがいない場合 src ディレクトリ、 cd 最初にそれに:

  1. cd src

次に、 data ディレクトリ:

  1. mkdir data

次に、 data/airports.js ファイルを作成し、テキストエディタで開きます。

以下を追加して、アプリケーションのデータを作成します。

空港コード/src/data/airports.js
export default [
  {
    name: 'Cincinnati/Northern Kentucky International Airport',
    abbreviation: 'CVG',
    city: 'Hebron',
    state: 'KY',
	  destinations: {
      passenger: [ 'Toronto', 'Seattle/Tacoma', 'Austin', 'Charleston', 'Denver', 'Fort Lauderdale', 'Jacksonville', 'Las Vegas', 'Los Angeles', 'Baltimore', 'Chicago', 'Detroit', 'Dallas', 'Tampa' ],
	    cargo: [ 'Anchorage', 'Baltimore', ' Chicago' , 'Indianapolis', 'Phoenix', 'San Francisco', 'Seattle', 'Louisville', 'Memphis' ]
	  }
  },
  {
    name: 'Seattle-Tacoma International Airport',
    abbreviation: 'SEA',
    city: 'Seattle',
    state: 'WA',
	  destinations: {
      passenger: [ 'Dublin', 'Mexico City', 'Vancouver', 'Albuquerque', 'Atlanta', 'Frankfurt', 'Amsterdam', 'Salt Lake City', 'Tokyo', 'Honolulu' ],
	    cargo: [ 'Spokane', 'Chicago', 'Dallas', ' Shanghai', 'Cincinnati', 'Luxenbourg', 'Anchorage', 'Juneau', 'Calgary', 'Ontario' ]
	  }
  },
  {
    name: 'Minneapolis-Saint Paul International Airport',
    abbreviation: 'MSP',
    city: 'Bloomington',
    state: 'MN',
	  destinations: {
      passenger: [ 'Dublin', 'Paris', 'Punta Cana', 'Winnipeg', 'Tokyo', 'Denver', 'Tulsa', 'Washington DC', 'Orlando', 'Mexico City' ],
	    cargo: [ 'Cincinnati', 'Omaha', 'Winnipeg', 'Chicago', 'St. Louis', 'Portland', 'Philadelphia', 'Milwaukee', 'Ontario' ]
	  }
  }
]

このデータは、米国内のいくつかの空港で構成されるオブジェクト配列です。 このアプリケーションでは、このデータを反復処理して、 name , abbreviation, city、 と state プロパティ。 ユーザーがカードをクリックすると、Vueルーターを使用して動的ビューにルーティングし、これらのプロパティの1つから読み取ります。 そこから、ネストされたルートを作成して、に保存されている情報を表示します。 destination 財産。

ファイルを保存して終了します。

次に、 Home.vue と呼ばれるディレクトリ内のコンポーネント views. このディレクトリとコンポーネントを作成するには、ターミナルを開いて、 mkdirtouch コマンド。

次のコマンドを実行して、ディレクトリを作成します。

  1. mkdir views

次に、を作成します Home.vue ファイル:

  1. touch views/Home.vue

これ Home.vue コンポーネントは、このアプリケーションのホームページとして機能します。 その中で、あなたは v-for を繰り返すためのディレクティブ airports.js データセットを作成し、各空港をカードに表示します。

次のコードをに追加します Home.vue:

空港-codes/src / views / Home.vue
<template>
  <div class="wrapper">
    <div v-for="airport in airports" :key="airport.abbreviation" class="airport">
      <p>{{ airport.abbreviation }}</p>
      <p>{{ airport.name }}</p>
      <p>{{ airport.city }}, {{ airport.state }}</p>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import allAirports from '@/data/airports.js'

export default {
  setup() {
    const airports = ref(allAirports)
		return { airports }
	}
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 1rem;
  max-width: 960px;
  margin: 0 auto;
}
.airport {
  border: 3px solid;
  border-radius: .5rem;
  padding: 1rem;
}
.airport p:first-child {
  font-weight: bold;
  font-size: 2.5rem;
  margin: 1rem 0;
}
.airport p:last-child {
  font-style: italic;
  font-size: .8rem;
}
</style>

このコードスニペットにCSSが含まれていることに気付くかもしれません。 の中に Home.vue コンポーネントでは、空港のコレクションを反復処理します。各空港には、次のCSSクラスが割り当てられています。 airport. このCSSは、各空港にカードの外観を与えるために境界線を作成することにより、生成されたHTMLにスタイルを追加します。 :first-child:last-child 最初と最後に異なるスタイルを適用する疑似セレクターです p 内部のHTMLのタグ div のクラスで airport.

ファイルを保存して閉じます。

この初期ビューがローカルデータセットとともに作成されたので、次のステップでVueルーターをインストールします。

ステップ2—Vueルーターのインストール

Vueルーターをインストールする方法はいくつかあります。 Vue CLI を使用して新しいプロジェクトを最初から作成する場合は、プロンプトで VueRouterを選択できます。 その後、VueCLIがインストールして構成します。 ただし、このチュートリアルでは、CLIセットアップで VueRouterオプションを選択しなかったと想定しています。 代わりに、npmを介してVueルーターをインストールします。

Vueルーターをインストールするには、まず src ディレクトリをプロジェクトディレクトリのルートに戻します。

  1. cd ..

次に、プロジェクトのルートディレクトリにあるターミナルウィンドウで次のコマンドを実行します。

  1. npm i vue-router@next

あなたは気付くかもしれません @next このコマンドで。 このプロジェクトはVue3とCompositionAPIを使用しているため、このライブラリの最新の実験バージョンをダウンロードするようにnpmに指示しています。 現在のリリースの詳細については、GitHubVueルーターのリリースページをご覧ください。

これにより、 vue-router npmからライブラリを作成し、 package.json ファイル。次回実行時に自動的にダウンロードされます。 npm install.

次のステップは、ルートファイルを作成することです。 このファイルには、ユーザーがナビゲートできるすべての可能なルートが含まれます。 URLバーで特定のルートにアクセスすると、URLルートに関連付けられているコンポーネントがマウントされます。

あなたのターミナルでは、 src ディレクトリ、に移動します src ディレクトリを作成し、 router ディレクトリ:

  1. cd src
  2. mkdir router

次に、を作成します index.js 内部のファイル router ディレクトリ:

  1. touch router/index.js

作成したファイルを任意のエディターで開きます。 最初にすることは import Vueルーターライブラリ。 ルートを作成するために、実際にはこのライブラリのすべてにアクセスする必要はありません。 destructure を選択するか、バンドルサイズを最小化するために必要なものだけをインポートすることができます。 この場合、次の2つの関数が必要です。 vue-router: createWebHistorycreateRouter. これらの関数は、ユーザーが戻ってVueのルーターオブジェクトを作成できる履歴をそれぞれ作成します。

次のコードをに追加します router/index.js:

空港コード/src/router/index.js
import { createWebHistory, createRouter } from "vue-router"

次に、次の強調表示された行を追加して、ルーターを作成およびエクスポートします。

空港コード/src/router/index.js
import { createWebHistory, createRouter } from "vue-router"

const router = createRouter({
  history: createWebHistory(),
})

export default router

このファイルは、から返されるルーターオブジェクトをエクスポートします。 createRouter 関数。 渡すオブジェクトには、次の2つのプロパティがあります。 historyroutes. The history プロパティには、から生成された履歴が含まれます createWebHistoryroutes オブジェクトの配列です。 追加します routes このチュートリアルの後半。

次に、 Home オブジェクトの配列を表示および作成し、それらをに保存します const と呼ばれる routes:

空港コード/src/router/index.js
import { createWebHistory, createRouter } from "vue-router"
import Home from "@/views/Home.vue"

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
]

const router = createRouter({ ... })

export default router

各ルートは、次の3つのプロパティを持つオブジェクトです。

  • path:URLアドレス
  • name:プロジェクト内のルートを参照するために割り当てられた名前
  • componentpath ブラウザのURLバーに入力されます

今あなたの routes 作成されたアレイは、エクスポートされたものに追加する必要があります router 物体。

後に history キー/値ペア、追加 routes. これは略記です routes: routes JavaScriptの場合:

空港コード/src/router/index.js
import { createWebHistory, createRouter } from "vue-router"

const routes = [ ... ]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

この時点で、Vueルーターがプロジェクトに統合され、ルートが登録されます。 ファイルを保存して終了します。

別のターミナルで、次のコマンドを実行して、ローカルマシンで開発サーバーを起動します。

  1. npm run serve

あなたが訪問した場合 localhost:8080/ ブラウザウィンドウには、 Home.vue まだコンポーネント。 この統合プロセスの最後のステップは、Vueにこれを聞くように指示することです router/index.js マウントされたコンポーネントをファイルして注入します。 <router-view /> 参照されます。 これを行うには、でそれを参照する必要があります src/main.js アプリケーションのファイル。

まず、開く src/main.js. 次に、次の強調表示された行を追加します。

空港コード/src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

これとともに .use() に連鎖する関数 createApp、Vue.jsは現在、ルートの変更をリッスンし、 src/router/index.js ファイル。 ただし、Vueルーターにはマウントされたものを表示する方法がありません Home.vue 成分。 これを行うには、を追加する必要があります router-view あなたの内部のコンポーネント App.vue ファイル。 このコンポーネントは、Vueルーターにルートに関連付けられたコンポーネントをマウントするように指示します。 <router-view /> は。

保存して終了します main.js ファイル。

次に、 App.vue ファイル。 デフォルトのコンテンツを削除して、次のように置き換えます。

空港コード/src/App.vue
<template>
  <router-view />
</template>

ファイルを保存して終了します。

今すぐ訪問 localhost:8080/ ブラウザで。 あなたは見つけるでしょう Home.vue 次のスクリーンショットに示すように、レンダリングされたコンポーネント:

これで、Vueルーターがダウンロードされ、登録済みのルートと統合されました。 次のセクションでは、2つの内部ページと、ルートが検出されなかった場合のデフォルトの 404 ページを含む、追加のルートを作成します。

ステップ3—内部ページを作成する

この時点で、 App.vue で構成された任意のコンポーネントをレンダリングできます src/router/index.js ファイル。 Vue CLIで生成されたプロジェクトで作業する場合、作成されるディレクトリの1つは次のとおりです。 views. このディレクトリには、 .vue 内のルートに直接マップされるコンポーネント router/index.js ファイル。 これは自動的には行われないことに注意することが重要です。 を作成する必要があります .vueimport 前に詳述したように、それをルーターファイルに登録して登録します。

他のすべてのルートを定義する前に、 default ルート。 このチュートリアルでは、このデフォルトルートは404-見つかりませんページとして機能します。ルートが見つからない場合のフォールバックです。

まず、404ページとして機能するビューを作成します。 に変更します views ディレクトリ:

  1. cd views

次に、というファイルを作成します PageNotFound.vue:

  1. touch PageNotFound.vue

テキストエディタで、これを開きます PageNotFound.vue 作成したファイル。 次のHTMLコードを追加して、ビューにレンダリングするものを提供します。

空港-codes/src / views / PageNotFound.vue
<template>
  <div>
    <h1>404 - Page Not Found</h1>
    <p>This page no longer exists or was moved to another location.</p>
  </div>
</template>

ファイルを保存して閉じます。

今では PageNotFound.vue コンポーネントが作成されたら、アプリケーションのキャッチオールルートを作成します。 開く src/router/index.js テキストエディタでファイルを作成し、次の強調表示されたコードを追加します。

空港コード/src/router/index.js
import { createWebHistory, createRouter } from "vue-router"
import Home from "@/views/Home.vue"
import PageNotFound from '@/views/PageNotFound.vue'

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: '/:catchAll(.*)*',
    name: "PageNotFound",
    component: PageNotFound,
  },
]
...

Vue3用のVueルーターはカスタムRegExを使用します。 の値 path Vueにレンダリングするように指示しているこの新しい正規表現が含まれています PageNotFound.vue ルートがすでに定義されていない限り、すべてのルートに対して。 The catchAll このルートでは、Vueルーター内の動的セグメントを指します。 (.*) 任意の文字列をキャプチャする正規表現です。

このファイルを保存し、ブラウザウィンドウでアプリケーションにアクセスします。 localhost:8080/not-found. あなたは見つけるでしょう PageNotFound.vue 次の画像に示すように、ブラウザでレンダリングされたコンポーネント:

このURLを他のURLに自由に変更してください。 同じ結果が得られます。

先に進む前に、アプリケーション用に別のルートを作成してください。 このルートはaboutページになります。

選択したターミナルを開き、ファイルを作成します views ディレクトリ:

  1. touch About.vue

テキストエディタで、これを開きます About.vue 作成したファイル。 次のHTMLを追加して、サイトに関する詳細情報を作成します。

空港-codes/src / views / About.vue
<template>
  <div>
    <h1>About</h1>
    <p>This is an about page used to illustrate mapping a view to a router with Vue Router.</p>
  </div>
</template>

ファイルを保存して閉じます。

そのビューを作成したら、 src/router/index.js テキストエディタでファイルをインポートし、 About.vue コンポーネント、およびパスで新しいルートを登録します /about:

空港コード/src/router/index.js
import { createWebHistory, createRouter } from "vue-router"
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'
import PageNotFound from '@/views/PageNotFound.vue'

...
const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: '/about',
    name: "About",
    component: About,
  },
  {
    path: '/:catchAll(.*)*',
    name: "PageNotFound",
    component: PageNotFound,
  },
]
...

ファイルを保存して閉じます。

この時点で、3つの異なるルートがあります。

  • localhost:8080/、にルーティングします Home.vue
  • localhost:8080/about、にルーティングします About.vue
  • デフォルトでに行く他のルート PageNotFound.vue

このファイルを保存したら、ブラウザを開いて最初にアクセスします localhost:8080/. アプリケーションがロードされると、次のコンテンツが表示されます。 Home.vue:空港カードのコレクション。

次のサイトにアクセスして、これらのルートのテストを続けてください localhost:8080/about. これは静的ルートであるため、 About.vue コンポーネント。この時点で、見出しと段落が含まれています。

次に、あなたはテストすることができます PageNotFound.vue ブラウザで他の何かにアクセスしてコンポーネントを作成します。 たとえば、訪問した場合、 localhost:8080/some-other-route、Vueルーターはデフォルトでそれになります catchAll そのルートが定義されていないため、ルート。

このステップが示すように、Vueルーターは特定のルートに関連付けられたコンポーネントをレンダリングする便利なファーストパーティライブラリです。 このステップでは、このライブラリがダウンロードされ、 main.js ファイルとあなたので構成されました src/router/index.js ファイル。

これまでのところ、ほとんどのルートは正確なルートです。 これは、URLフラグメントが path 正確にルーターの。 ただし、独自の目的を持ち、コンテンツを動的に生成できる他のタイプのルートがあります。 次のステップでは、さまざまなタイプのルートを実装し、どちらを使用するかを学習します。

ステップ4—パラメータを使用してルートを作成する

この時点で、2つの正確なルートと404ページへの動的ルートを作成しました。 しかし、Vueルーターにはこれらのタイプ以上のルートがあります。 Vueルーターでは次のルートを使用できます。

  • 動的ルート:アプリケーションが一意のデータをロードするために参照できる動的パラメーターを持つルート。
  • 名前付きルート:を使用してアクセスできるルート name 財産。 この時点で作成されたすべてのルートには、 name 財産。
  • ネストされたルート:子が関連付けられているルート。
  • 静的または正確なルート:静的なルート path 価値。

このセクションでは、個々の空港情報を表示する動的ルートと、空港の目的地のネストされたルートを作成します。

動的ルート

動的ルートは、ビューを再利用してルートに応じて異なるデータを表示する場合に役立ちます。 たとえば、URLバーの空港コードに応じて空港情報を表示するビューを作成する場合は、動的ルートを使用できます。 この例では、 localhost:8080/airport/cvg、アプリケーションは空港からのデータをコードで表示します cvg、シンシナティ/ノーザンケンタッキー国際空港。 次に、説明したようにこのビューを作成します。

ターミナルを開いて、新しいものを作成します .vue とファイル touch 指図。 もしも src が現在の作業ディレクトリである場合、コマンドは次のようになります。

  1. touch views/AirportDetail.vue

それが作成されたら、選択したテキストエディタでこのファイルを開きます。 先に進んで、 templatescript このコンポーネントを設定するためのタグ:

空港コード/src/views/AirportDetail.vue
<template>
  <div>
    
  </div>
</template>

<script>
export default {
  setup() { }
}
</script>

このファイルを保存して閉じます。

次に、このビューをに登録する必要があります src/router/index.js ファイル。 このファイルをテキストエディタで開き、次の強調表示された行を追加します。

空港コード/src/router/index.js
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'
import AirportDetail from '@/views/AirportDetail.vue'
import PageNotFound from '@/views/PageNotFound.vue'

...
const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: '/about',
    name: "About",
    component: About,
  },
  {
    path: '/airport/:code',
    name: "AirportDetail",
    component: AirportDetail,
  },
  {
   path: '/:catchAll(.*)*',
   name: "PageNotFound",
   component: PageNotFound,
  },
]
...

The :code この新しいルートでは、パラメータと呼ばれます。 パラメータは、この名前を介してアプリケーションでアクセスできる任意の値です。 この場合、次の名前のパラメータがあります code. 次に、このパラメーターを利用して、この略語に関連する情報を表示します。

このファイルを保存して閉じます。

データができたので、 AirportDetail.vue 再びコンポーネント。 このコンポーネントに空港データをインポートします。

空港コード/src/views/AirportDetail.vue
...
<script>
import airports from '@/data/airports.js'

export default {
  setup() { }
}
</script>

次に、次の場合に配列から1つのオブジェクトを返す計算プロパティを作成します。 abbreviation そのオブジェクトのプロパティは、 :code URLのパラメータ。 Vue 3では、構造を解除する必要があります computed から vue 図書館:

空港コード/src/views/AirportDetail.vue
...
<script>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import airports from '@/data/airports.js'

export default {
  setup() {
  const route = useRoute()
	const airport = computed(() => {
		return airports.filter(a => a.abbreviation === route.params.code.toUpperCase())[0]
	})

	return { airport }
  }
}
</script>

この計算されたプロパティは、JavaScriptの filter array method を使用して、条件が満たされた場合にオブジェクトの配列を返します。 オブジェクトが1つだけ必要なため、コードは常に最初のオブジェクトを返します。このオブジェクトには、 [0] インデックス構文。 The route.params.code ルーターファイルで定義されたパラメータにアクセスする方法です。 ルートのプロパティにアクセスするには、から関数をインポートする必要があります vue-router 名前付き useRoute. これで、ルートにアクセスすると、ルートのすべてのプロパティにすぐにアクセスできます。 これにアクセスするためにドット表記を使用しています code paramとその値を取得します。

この時点で、URLのコードが一致する場合、この計算されたプロパティは単一の空港オブジェクトを返します。 abbreviation 財産。 これは、空港のすべてのオブジェクトプロパティにアクセスでき、 template このコンポーネントの。

編集を続ける AirportDetail.vue テキストエディタでファイルを作成し、テンプレートを作成して空港の情報を表示します。

空港コード/src/views/AirportDetail.vue
<template>
 <div>
   <p>{{ airport.name }} ({{ airport.abbreviation }})</p>
   <p>Located in {{ airport.city }}, {{ airport.state }}</p>
 </div>
</template>
...

ブラウザを開いて、 localhost:8080/airport/sea. 次の画像に示すように、シアトルタコマ国際空港に関連する情報がブラウザに表示されます。

ネストされたルート

アプリケーションが大きくなるにつれて、親に関連するルートがいくつかあることに気付く場合があります。 これの良い例は、ユーザーに関連付けられた一連のルートである可能性があります。 名前の付いたユーザーがいる場合 foo、同じユーザーに対して複数のネストされたルートを作成できます。 /user/foo/. ユーザーが /user/foo/profile ルートの場合、ユーザーは自分に関連付けられたプロファイルページを表示します。 A posts ユーザーのページには、 /user/foo/posts. このネストにより、コンポーネントとともにルートを整理することができます。 詳細については、Vueルーターのドキュメントをご覧ください。

この同じパターンを、このチュートリアル全体で作成したアプリケーションに適用できます。 このセクションでは、各空港がサポートする目的地を表示するビューを追加します。

ターミナルを開き、 src ディレクトリ、名前で新しいファイルを作成します AirportDestinations.vue:

  1. touch views/AirportDestinations.vue

次に、テキストエディタを開き、以下を追加します。

空港コード/src/views/AirportDestinations.vue
<template>
  <h1>Destinations for {{ airport.name }} ({{ airport.abbreviation }}</h1>
  <h2>Passenger</h2>
  <ul>
    <li v-for="(destination, i) in airport.destinations.passenger" :key="i">
      {{ destination }}
    </li>
  </ul>
  <h2>Cargo</h2>
  <ul>
    <li v-for="(destination, i) in airport.destinations.cargo" :key="i">
      {{ destination }}
    </li>
  </ul>
</template>

<script>
  import { computed } from 'vue'
  import { useRoute } from 'vue-router'
  import airports from '@/data/airports.js'

  export default {
    setup() {
      const route = useRoute()
      const airport = computed(() => {
        return airports.filter(a => a.abbreviation === route.params.code.toUpperCase())[0]
      })
    return { airport }
  }
}
</script>

このビューは、各空港のすべての目的地を airports.js ファイル。 このビューでは、を使用しています v-for 宛先を反復処理するディレクティブ。 のように AirportDetail.vue ビュー、あなたはと呼ばれる計算されたプロパティを作成しています airport に一致する空港を取得するには :code URLバーのパラメータ。

ファイルを保存して閉じます。

ネストされたルートを作成するには、を追加する必要があります children 内のルートオブジェクトへのプロパティ src/router/index.js ファイル。 子(ネストされた)ルートオブジェクトには、その親と同じプロパティが含まれています。

開く router/index.js 次の強調表示された行を追加します。

空港コード/src/router/index.js
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'
import AirportDetail from '@/views/AirportDetail.vue'
import AirportDestinations from '@/views/AirportDestinations.vue'
import PageNotFound from '@/views/PageNotFound.vue'

...
const routes = [
	...
  {
    path: '/airport/:code',
    name: "AirportDetail",
    component: AirportDetail,
		children: [
			{
			  path: 'destinations',
				name: 'AirportDestinations',
				component: AirportDestinations
			}
		]
  },
	...
]
...

The path この子ルートは親に比べて短いためです。 これは、ネストされたルートでは、ルート全体を追加する必要がないためです。 子は親を継承します path そしてそれを子供に追加します path.

ブラウザウィンドウを開き、にアクセスします localhost:8080/airport/msp/destinations. 親と何も変わらないようですが、 AirportDetails.vue. これは、ネストされたルートを使用する場合、 <router-view /> 親のコンポーネント。 子ルートにアクセスすると、Vueは子ビューのコンテンツを親に挿入します。

空港コード/src/views/AirportDetail.vue
<template>
 <div>
   <p>{{ airport.name }} ({{ airport.abbreviation }})</p>
   <p>Located in {{ airport.city }}, {{ airport.state }}</p>
	 <router-view />
 </div>
</template>

この場合、ブラウザで目的地のルートにアクセスすると、 AirportDestinations.vue ミネアポリス・セントポール国際空港がサポートする目的地の順不同のリストが、旅客便と貨物便の両方で表示されます。

このステップでは、動的なネストされたルートを作成し、計算されたプロパティを使用して :code URLバーのパラメータ。 すべてのルートが作成されたので、最後のステップで、リンクを作成してさまざまなタイプのルート間を移動します。 <router-link /> 成分。

ステップ5—ルート間を移動する

シングルページアプリケーションを使用する場合、注意が必要ないくつかの注意事項があります。 すべてのページが単一のHTMLページにブートストラップされるため、標準のアンカーを使用して内部ルート間を移動します(<a />) 動作しないでしょう。 代わりに、を使用する必要があります <router-link /> Vueルーターが提供するコンポーネント。

標準のアンカータグとは異なり、 router-link 名前付きルートの使用など、アプリケーション内の他のルートにリンクするためのさまざまな方法を提供します。 名前付きルートは、 name それらに関連付けられたプロパティ。 これまでに作成したすべてのリンクには、 name すでに関連付けられています。 このステップの後半では、を使用してナビゲートする方法を学習します name ではなく path.

The <router-link /> Vue Routerを最初にアプリケーションに統合したときに、コンポーネントがグローバルにインポートされました。 このコンポーネントを使用するには、このコンポーネントをテンプレートに追加し、小道具の値を指定します。

を開きます Home.vue 内のコンポーネント views エディタのディレクトリ。 このビューには、空港にあるすべての空港が表示されます。 airports.js ファイル。 使用できます router-link 含むものを交換する div 各カードをクリックしてそれぞれの詳細ビューに表示できるようにするためのタグ。

次の強調表示された行をに追加します Home.vue:

空港-codes/src / views / Home.vue
<template>
	<div class="wrapper">
		<router-link v-for="airport in airports" :key="airport.abbreviation" class="airport">
			<p>{{ airport.abbreviation }}</p>
			<p>{{ airport.name }}</p>
			<p>{{ airport.city }}, {{ airport.state }}</p>
		</router-link>
	</div>
</template>
...

最低限、 router-link と呼ばれる1つの小道具が必要です to. これ to propは、いくつかのキーと値のペアを持つオブジェクトを受け入れます。 このカードは v-for ディレクティブ、これらのカードはデータ駆動型です。 に移動できる必要があります AirportDetail.vue 成分。 そのコンポーネントのパスを確認すると、次の方法でアクセスできます。 /airports/:code.

経由でナビゲートする場合 path プロパティ、それは1対1の一致です。 次の強調表示されたセグメントを追加します。

空港-codes/src / views / Home.vue
<template>
	<div class="wrapper">
		<router-link :to="{ path: `/airports/${airport.abbreviation}` }" v-for="airport in airports" :key="airport.abbreviation" class="airport">
			...
		</router-link>
	</div>
</template>
...

このコードでは、 JavaScript文字列補間を使用して、空港コードを値として動的に挿入しています。 path 財産。 ただし、アプリケーションの規模が大きくなるにつれて、 path 最善の方法ではありません。 実際、名前付きルートを使用してナビゲートすることが一般的にベストプラクティスと見なされています。

名前付きルートを実装するには、 name 上のルートの path. 参照する場合 src/router/index.js あなたはそれを見つけるでしょう AirportDetail.vue の名前があります AirportDetail:

空港-codes/src / views / Home.vue
<template>
	<div class="wrapper">
		<router-link :to="{ name: 'AirportDetail' }" v-for="airport in airports" :key="airport.abbreviation" class="airport">
			...
		</router-link>
	</div>
</template>
...

正確なルートよりも名前付きルートを使用する利点は、名前付きルートが path ルートの。 URL構造は開発中に常に変更されますが、ルートの名前はめったに変更されません。

正確なルートで以前に行ったように、空港コードを渡すことができないことに気付くかもしれません。 名前付きルートにパラメータを渡す必要がある場合は、 params パラメータを表すオブジェクトを含むプロパティ:

空港-codes/src / views / Home.vue
<template>
	<div class="wrapper">
		<router-link :to="{ name: 'AirportDetail', params: { code: airport.abbreviation } }" v-for="airport in airports" :key="airport.abbreviation" class="airport">
			...
		</router-link>
	</div>
</template>
...

このファイルを保存して、ブラウザで表示します。 localhost:8080. シアトル・タコマ空港カードをクリックすると、次の場所に移動します。 localhost:8080/airport/sea.

プログラマティックナビゲーション

The <router-link /> コンポーネントは、HTMLテンプレート内の別のビューに移動する必要がある場合に使用すると便利です。 しかし、JavaScript関数内でルート間を移動する必要がある場合はどうでしょうか。 Vueルーターは、プログラムナビゲーションと呼ばれるこの問題の解決策を提供します。

このチュートリアルの前半で、と呼ばれるキャッチオールルートを作成しました PageNotFound. 次の場合は、常にそのページに移動することをお勧めします。 airport 計算されたプロパティが返されました undefined の中に AirportDetail.vueAirportDestinations.vue コンポーネント。 このセクションでは、この機能を実装します。

テキストエディタで、 AirportDetail.vue 成分。 これを達成するには、 airport.value 未定義です。 この関数は、コンポーネントが最初にマウントされたときに呼び出されます。つまり、Vueのライフサイクルメソッドを使用する必要があります。

次の強調表示された行を追加します。

空港コード/src/views/AirportDetail.vue
<template>
  <div v-if="airport">
   <p>{{ airport.name }} ({{ airport.abbreviation }})</p>
   <p>Located in {{ airport.city }}, {{ airport.state }}</p>
   <router-view />
  </div>
</template>

<script>
    import { computed, onMounted } from 'vue'
    import { useRoute } from 'vue-router'
    import airports from '@/data/airports.js'
    import router from '@/router'

    export default {
			setup() {
        const route = useRoute()
				const airport = computed(() => {
					return airports.filter(a => a.abbreviation === route.params.code.toUpperCase())[0]
				})
					
				onMounted(() => {
					if (!airport.value) {
						// Navigate to 404 page here
					}
				})
					
				return { airport }
			}
    }
</script>

これで onMounted 機能、あなたはチェックしています airport.value 偽の値です。 もしそうなら、あなたはにルーティングします PageNotFound. プログラムによるルーティングは、処理方法と同様に処理できます。 router-link 成分。 JavaScript関数ではコンポーネントを使用できないため、使用する必要があります router.push({ ... }). これ push の方法 router オブジェクトはの値を受け入れます to リンクコンポーネントを使用する場合の小道具:

/src/views/AirportDetail.vue
<script>
	...
  onMounted(() => {
		if (!airport.value) {
			router.push({ name: 'PageNotFound' })
		}
  })
	...
</script>

ルートが存在しない場合、またはデータが適切に返されない場合、これによりユーザーは壊れたWebページから保護されます。

ファイルを保存して、に移動します localhost:8080/airport/ms. 以来 ms データ内の空港コードではありません、 airport オブジェクトは未定義になり、ルーターは404ページにリダイレクトします。

結論

このチュートリアルでは、Vueルーターを使用して、異なるビュー間をルーティングするWebアプリケーションを作成しました。 正確なルート、名前付きルート、ネストされたルートなど、さまざまなタイプのルートを学習しました。また、 router-link 成分。 最後のステップでは、ルーターを活用してJavaScriptを使用したプログラムナビゲーションを提供しました push() 関数。

Vueルーターの詳細については、ドキュメントを読むことをお勧めします。 CLIツールには、このチュートリアルではカバーされていない多くの追加機能があります。 Vueのその他のチュートリアルについては、Vueトピックページをご覧ください。