Vueルーターでビュー間を移動する方法

著者は、 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パラメータを読み取り、そのパラメータに基づいてデータを除外します。

前提条件

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

コンピューターにインストールされているNode.jsバージョン10.6.0以降。これをmacOSまたはUbuntu18.04にインストールするには、macOSで Node.jsをインストールしてローカル開発環境を作成する方法、またはNode.jsをインストールする方法のPPAを使用してインストールするセクションの手順に従います。 Ubuntu18.04で。
Vue CLIがマシンにインストールされ、新しいプロジェクトが生成されました。このチュートリアルでは、アプリの作成時にVueルーターを選択しないでください。このチュートリアルの最初のステップで、これを手動でインストールします。このプロジェクトの名前はairport-codesになり、ルートディレクトリとして機能します。
また、JavaScript、HTML、およびCSSの基本的な知識も必要です。これは、 HTMLを使用してWebサイトを構築する方法シリーズ、CSSを使用してWebサイトを構築する方法シリーズにあります。、およびJavaScriptでコーディングする方法。

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

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

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

cd src

次に、dataディレクトリを作成します。

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プロパティに格納されている情報を表示するためのネストされたルートを作成します。

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

次に、viewsというディレクトリ内にHome.vueコンポーネントを作成します。このディレクトリとコンポーネントを作成するには、ターミナルを開き、mkdirおよびtouchコマンドを使用します。

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

mkdir views

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

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コンポーネントでは、空港のコレクションを反復処理しています。各空港には、airportのCSSクラスが割り当てられています。このCSSは、各空港にカードの外観を与えるために境界線を作成することにより、生成されたHTMLにスタイルを追加します。 :first-childと:last-childは、div内のHTMLの最初と最後のpタグに異なるスタイルを適用する疑似セレクターです。 airportのクラスで。

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

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

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

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

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

cd ..

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

npm i vue-router@next

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

これにより、npmからvue-routerライブラリがダウンロードされ、package.jsonファイルに追加されるため、次にnpm installを実行したときに自動的にダウンロードされます。

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

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

cd src
mkdir router

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

touch router/index.js

作成したファイルを任意のエディターで開きます。最初に行うことは、importVueルーターライブラリです。ルートを作成するために、実際にはこのライブラリのすべてにアクセスする必要はありません。 destructure を選択するか、バンドルサイズを最小化するために必要なものだけをインポートすることができます。この場合、vue-routerの2つの関数createWebHistoryとcreateRouterが必要です。これらの関数は、ユーザーが戻って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関数から返されるルーターオブジェクトをエクスポートします。渡すオブジェクトには、historyとroutesの2つのプロパティがあります。 historyプロパティには、createWebHistoryから生成された履歴が含まれ、routesはオブジェクトの配列です。このチュートリアルの後半でroutesを追加します。

次に、Homeビューをインポートしてオブジェクトの配列を作成し、routesというconstに格納します。

空港コード/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：プロジェクト内のルートを参照するために割り当てられた名前
component：ブラウザのURLバーにpathを入力したときにマウントされるコンポーネント

routes配列が作成されたので、エクスポートされたrouterオブジェクトに追加する必要があります。

historyキー/値ペアの後に、routesを追加します。これは、JavaScriptのroutes: routesの省略形です。

空港コード/src/router/index.js

import { createWebHistory, createRouter } from "vue-router"

const routes = [ ... ]

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

export default router

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

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

npm run serve

ブラウザウィンドウでlocalhost:8080/にアクセスすると、Home.vueコンポーネントはまだ表示されません。この統合プロセスの最後のステップは、このrouter/index.jsファイルをリッスンし、<router-view />が参照されているマウントされたコンポーネントを挿入するようにVueに指示することです。これを行うには、アプリケーションの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')

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

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です。このディレクトリには、router/index.jsファイルのルートに直接マップされている.vueコンポーネントが含まれています。これは自動的には行われないことに注意することが重要です。先に詳述したように、ルーターファイルに.vueとimportを作成して登録する必要があります。

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

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

cd views

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

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

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

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

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

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

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、シンシナティ/ノーザンケンタッキー国際空港の空港からのデータを表示します。次に、説明したようにこのビューを作成します。

端末を開き、touchコマンドを使用して新しい.vueファイルを作成します。 srcが現在の作業ディレクトリである場合、コマンドは次のようになります。

touch views/AirportDetail.vue

それが作成されたら、選択したテキストエディタでこのファイルを開きます。先に進み、templateおよびscriptタグを作成して、このコンポーネントをセットアップします。

空港コード/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,
  },
]
...

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

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

データができたので、AirportDetail.vueコンポーネントをもう一度開きます。このコンポーネントに空港データをインポートします。

空港コード/src/views/AirportDetail.vue

...
<script>
import airports from '@/data/airports.js'

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

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

空港コード/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]インデックス構文でアクセスします。 route.params.codeは、ルーターファイルで定義されたパラメーターにアクセスする方法です。ルートのプロパティにアクセスするには、useRouteという名前の関数をvue-routerからインポートする必要があります。これで、ルートにアクセスすると、ルートのすべてのプロパティにすぐにアクセスできます。ドット表記を使用して、このcodeパラメータにアクセスし、その値を取得しています。

この時点で、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ルートを使用している場合、ユーザーは自分に関連付けられているプロファイルページを表示します。ユーザーのpostsページには、/user/foo/postsのルートがある場合があります。このネストにより、コンポーネントとともにルートを整理することができます。詳細については、Vueルーターのドキュメントをご覧ください。

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

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

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という計算プロパティを作成して、URLバーの:codeパラメーターに一致する空港を取得します。

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

ネストされたルートを作成するには、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
            }
        ]
  },
    ...
]
...

この子ルートの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は、ミネアポリス・セントポール国際空港がサポートする目的地の順不同のリストを、旅客便と貨物便の両方で表示します。

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

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

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

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

`<router-link />`コンポーネントの使用

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

エディタのviewsディレクトリ内のHome.vueコンポーネントを開きます。このビューには、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にはtoと呼ばれる1つの支柱が必要です。このto小道具は、いくつかのキーと値のペアを持つオブジェクトを受け入れます。このカードは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を介して別のルートに移動するのが最善の方法ではない場合があります。実際、名前付きルートを使用してナビゲートすることが一般的にベストプラクティスと見なされています。

名前付きルートを実装するには、path上のルートのnameを使用します。 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で表示します。 Seattle-Tacoma空港カードをクリックすると、localhost:8080/airport/seaに移動します。

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

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

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

テキストエディタで、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({ ... })を使用する必要があります。 routerオブジェクトのこのpushメソッドは、リンクコンポーネントを使用するときに、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コンポーネントを使用してパラメーターを使用してリンクを作成しました。最後のステップでは、ルーターのpush()機能を利用して、JavaScriptを使用したプログラムナビゲーションを提供しました。

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

Vueルーターでビュー間を移動する方法

序章

前提条件

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

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

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

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

動的ルート

ネストされたルート

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

<router-link />コンポーネントの使用

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

結論

`<router-link />`コンポーネントの使用