Vueルーターでビュー間を移動する方法
著者は、 Write for DOnations プログラムの一環として、 Open Sourcing MentalIllnessを選択して寄付を受け取りました。
序章
ほとんどのWebサイトまたはアプリケーションには、静的または動的に生成される複数のHTMLページがあります。 従来のWebサイトでは、ドキュメントオブジェクトモデル(DOM)が1つと、URLルートごとに1つのページがあります。 ただし、シングルページアプリケーションでは、すべての「ページ」またはビューが1つのHTMLページ内にレンダリングされます。 Vue.jsなどのユーザーインターフェイス(UI)フレームワークは、仮想DOMを使用して、必要に応じてこれらのページとコンポーネントをレンダリングします。 この
ユーザーが単一ページのアプリケーションにアクセスすると、そのアプリケーションはそれ自体を仮想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
ディレクトリを作成し、名前を付けてJavaScriptファイルを作成します airports.js
. あなたがいない場合 src
ディレクトリ、 cd
最初にそれに:
- cd src
次に、 data
ディレクトリ:
- mkdir data
次に、 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
. このディレクトリとコンポーネントを作成するには、ターミナルを開いて、 mkdir
と touch
コマンド。
次のコマンドを実行して、ディレクトリを作成します。
- mkdir views
次に、を作成します Home.vue
ファイル:
- touch views/Home.vue
これ Home.vue
コンポーネントは、このアプリケーションのホームページとして機能します。 その中で、あなたは v-for
を繰り返すためのディレクティブ airports.js
データセットを作成し、各空港をカードに表示します。
次のコードをに追加します 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
ディレクトリをプロジェクトディレクトリのルートに戻します。
- cd ..
次に、プロジェクトのルートディレクトリにあるターミナルウィンドウで次のコマンドを実行します。
- npm i vue-router@next
あなたは気付くかもしれません @next
このコマンドで。 このプロジェクトはVue3とCompositionAPIを使用しているため、このライブラリの最新の実験バージョンをダウンロードするようにnpmに指示しています。 現在のリリースの詳細については、GitHubのVueルーターのリリースページをご覧ください。
これにより、 vue-router
npmからライブラリを作成し、 package.json
ファイル。次回実行時に自動的にダウンロードされます。 npm install
.
次のステップは、ルートファイルを作成することです。 このファイルには、ユーザーがナビゲートできるすべての可能なルートが含まれます。 URLバーで特定のルートにアクセスすると、URLルートに関連付けられているコンポーネントがマウントされます。
あなたのターミナルでは、 src
ディレクトリ、に移動します src
ディレクトリを作成し、 router
ディレクトリ:
- cd src
- mkdir router
次に、を作成します index.js
内部のファイル router
ディレクトリ:
- touch router/index.js
作成したファイルを任意のエディターで開きます。 最初にすることは import
Vueルーターライブラリ。 ルートを作成するために、実際にはこのライブラリのすべてにアクセスする必要はありません。 destructure を選択するか、バンドルサイズを最小化するために必要なものだけをインポートすることができます。 この場合、次の2つの関数が必要です。 vue-router
: createWebHistory
と createRouter
. これらの関数は、ユーザーが戻ってVueのルーターオブジェクトを作成できる履歴をそれぞれ作成します。
次のコードをに追加します router/index.js
:
import { createWebHistory, createRouter } from "vue-router"
次に、次の強調表示された行を追加して、ルーターを作成およびエクスポートします。
import { createWebHistory, createRouter } from "vue-router"
const router = createRouter({
history: createWebHistory(),
})
export default router
このファイルは、から返されるルーターオブジェクトをエクスポートします。 createRouter
関数。 渡すオブジェクトには、次の2つのプロパティがあります。 history
と routes
. The history
プロパティには、から生成された履歴が含まれます createWebHistory
と routes
オブジェクトの配列です。 追加します routes
このチュートリアルの後半。
次に、 Home
オブジェクトの配列を表示および作成し、それらをに保存します const
と呼ばれる routes
:
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
:path
ブラウザのURLバーに入力されます
今あなたの routes
作成されたアレイは、エクスポートされたものに追加する必要があります router
物体。
後に history
キー/値ペア、追加 routes
. これは略記です routes: routes
JavaScriptの場合:
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
まだコンポーネント。 この統合プロセスの最後のステップは、Vueにこれを聞くように指示することです router/index.js
マウントされたコンポーネントをファイルして注入します。 <router-view />
参照されます。 これを行うには、でそれを参照する必要があります 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
ファイル。 デフォルトのコンテンツを削除して、次のように置き換えます。
<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
ファイル。 これは自動的には行われないことに注意することが重要です。 を作成する必要があります .vue
と import
前に詳述したように、それをルーターファイルに登録して登録します。
他のすべてのルートを定義する前に、 default
ルート。 このチュートリアルでは、このデフォルトルートは404-見つかりませんページとして機能します。ルートが見つからない場合のフォールバックです。
まず、404ページとして機能するビューを作成します。 に変更します views
ディレクトリ:
- cd views
次に、というファイルを作成します PageNotFound.vue
:
- touch PageNotFound.vue
テキストエディタで、これを開きます PageNotFound.vue
作成したファイル。 次のHTMLコードを追加して、ビューにレンダリングするものを提供します。
<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
テキストエディタでファイルを作成し、次の強調表示されたコードを追加します。
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
ディレクトリ:
- touch About.vue
テキストエディタで、これを開きます About.vue
作成したファイル。 次のHTMLを追加して、サイトに関する詳細情報を作成します。
<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
:
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
が現在の作業ディレクトリである場合、コマンドは次のようになります。
- touch views/AirportDetail.vue
それが作成されたら、選択したテキストエディタでこのファイルを開きます。 先に進んで、 template
と script
このコンポーネントを設定するためのタグ:
<template>
<div>
</div>
</template>
<script>
export default {
setup() { }
}
</script>
このファイルを保存して閉じます。
次に、このビューをに登録する必要があります 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
再びコンポーネント。 このコンポーネントに空港データをインポートします。
...
<script>
import airports from '@/data/airports.js'
export default {
setup() { }
}
</script>
次に、次の場合に配列から1つのオブジェクトを返す計算プロパティを作成します。 abbreviation
そのオブジェクトのプロパティは、 :code
URLのパラメータ。 Vue 3では、構造を解除する必要があります computed
から 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
テキストエディタでファイルを作成し、テンプレートを作成して空港の情報を表示します。
<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
:
- touch 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
次の強調表示された行を追加します。
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は子ビューのコンテンツを親に挿入します。
<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
.
を使用して <router-link />
成分
The <router-link />
Vue Routerを最初にアプリケーションに統合したときに、コンポーネントがグローバルにインポートされました。 このコンポーネントを使用するには、このコンポーネントをテンプレートに追加し、小道具の値を指定します。
を開きます Home.vue
内のコンポーネント views
エディタのディレクトリ。 このビューには、空港にあるすべての空港が表示されます。 airports.js
ファイル。 使用できます router-link
含むものを交換する div
各カードをクリックしてそれぞれの詳細ビューに表示できるようにするためのタグ。
次の強調表示された行をに追加します 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の一致です。 次の強調表示されたセグメントを追加します。
<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
:
<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
パラメータを表すオブジェクトを含むプロパティ:
<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.vue
と AirportDestinations.vue
コンポーネント。 このセクションでは、この機能を実装します。
テキストエディタで、 AirportDetail.vue
成分。 これを達成するには、 airport.value
未定義です。 この関数は、コンポーネントが最初にマウントされたときに呼び出されます。つまり、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
リンクコンポーネントを使用する場合の小道具:
<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トピックページをご覧ください。