Vueルーターのガイド

概要

Vue.jsを使用してWebアプリケーションを開発する場合、 シングルページアプリケーション（SPA）、ユーザーがそれらをナビゲートできるように、複数のページをランディングページに接続する必要があります。 これはとして知られています ルーティング.

ルーティングは、ユーザーがWebサイトのさまざまなページに移動するプロセスです。 Vue.jsは、シングルページアプリの作成に使用されるJavaScriptフレームワークです。つまり、このアプリケーションはサーバーからブラウザーにXNUMX回だけ読み込まれ、ルーティング時にブラウザーを再読み込みする必要はありません。 代わりに、これらのページを要求するだけで、それらがロードされます。

このガイドでは、Vue.jsを使用してルーティングを行う方法を学び、実行できるさまざまなタイプのルーティングとその方法について詳しく説明します。

スタートガイド

Vue.jsでのルーティングは Vueルーター、コアVueライブラリと連携して動作し、ルーティングシステムをセットアップできるようにします。 使いたい vue-router 私たちのプロジェクトのXNUMXつのシナリオで。 既存のプロジェクトでルーターを使用するか、新しいプロジェクトの作成時にルーターを追加します。

既存のプロジェクトでVueルーターをセットアップする

統合 vue-router 既存のプロジェクトに組み込むことは技術的である可能性があり、これらの詳細についてはここで説明します。 最初のステップは、次のコマンドを使用してvueルータパッケージをインストールすることです。

! npm install vue-router@4

インストールしたら、に移動します src フォルダと呼ばれるフォルダを作成します router、その後に次のファイルが続きます index.js セクションに router フォルダー。ルーター構成ファイルとして機能します。 私たちの src ディレクトリは次のようになります。

index.js ファイル、ルーター構成コードである以下のコードを確実に貼り付けましょう。

import { createRouter, createWebHashHistory } from 'vue-router'
import HomePage from '../views/HomePage.vue' const routes = [ { path: '/', name: 'home', component: HomePage },
] const router = createRouter({ history: createWebHashHistory(), routes
})
export default router

我々は持っている routes 単一のオブジェクトを含む配列。これは、各オブジェクトが単一のルートを表す複数のオブジェクトである可能性があります。 とりあえず、ホームページコンポーネントにリダイレクトするものだけを作成しました。

これらの各 routes オブジェクトは通常、 path、これはサイトのルートに相対的なURLパスであり、 name、識別子として機能し、 component、ページの上部にインポートしました。

ルート配列とは別に、下部にルーターインスタンスを設定します。 createRouter() 関数と受け渡し history キー値と routes 配列、次にエクスポートします router アプリケーション内で使用するインスタンス。

アプリケーション内でこのルーター構成を使用するには、 main.js 内のファイル src フォルダ、 import router from "./router"、次に追加 .use(router) の間に createApp(App) & .mount('#app') 以下のように：

import router from './router' createApp(App).use(router).mount('#app')

この vue-router アプリケーション内でグローバルに構成されています。次のステップは、アプリケーション内でそれを使用することです。 これは、以下を含めることで簡単に実現できます。 <router-view /> 中で App.js 一致したルートのみをレンダリングするテンプレートタグ：

<!--App.vue -->
<template>
<!-- Any code placed here is going to be fixed -->
<!-- This will only show the page that matches the selected route --> <router-view /> <!-- Any code placed here is going to be fixed -->
</template> <script> export default { name: 'App', }
</script>

Vue.jsでルートを設定する

ルートは通常、 router/index.js ファイルのroutes配列、およびこれらのルートはコンポーネントに接続します。 すべてのページビューが保存されるビューフォルダを作成することをお勧めします。 例えば：

この時点で、ルートを手動で設定する方法がわかりました。

VueCLIを使用してVueルーターをインストールする

新しいプロジェクトを作成しようとしていて、それを利用すると信じている場合 vue-router、プロジェクトの作成中に行う方が簡単です。

私たちがしなければならないのは、VueCLIを使用して最新バージョンの vue-router プロジェクトの作成プロセスで機能を手動で選択する場合：

Vue.jsプロジェクトの作成について詳しくは、こちらをご覧ください。 VueCLIのガイド!

Vueルーターを使用した遅延読み込みルート

アプリケーションのサイズが大きくなると、バンドルサイズも大きくなり、サイトの読み込みに時間がかかります。 使用できます vue-router ユーザーが具体的に要求するまで、特定のルートの読み込みを回避するために遅延読み込みを実装します。

これは通常、ルーター構成ファイルで、 import 上部のステートメントと、ルートのコンポーネントオプションの動的インポートステートメントに置き換えます。

import { createRouter, createWebHashHistory } from 'vue-router';
const routes = [ { path: '/', name: 'home', component: () => import(/* webpackChunkName: "home" */ '../views/HomePage.vue'), }, { path: '/about', name: 'about', component: () => import(/* webpackChunkName: "about" */ '../views/AboutPage.vue'), },
];
const router = createRouter({ history: createWebHashHistory(), routes,
});
export default router;

ルート間を移動する

これまでのところ、ルートを作成することはできましたが、アプリケーション内をどのようにナビゲートしますか？ 私たちは使用します <router-link> の代わりにタグ <a> ルーティングを処理するHTMLの要素。

たとえば、アプリケーションの上部にナビゲーションバーを作成する場合は、次の場所でこれを行うことができます。 App.js 上記のファイル <router-view/> すべてのルートに表示されるようにタグを付けます。

<nav> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link>
</nav>

router-linkは to='path' ルートを構成するときに設定したように、ユーザーをコンポーネントのパスに移動させる属性。 これは次のように機能します href='path``' HTMLの属性。

名前付きルートの使用

名前付きルートを使用すると、 name アクセスできるキー name 次のようにデータをバインドしてパスを使用する代わりに、ルートを構成するときに設定したプロパティ：

<router-link :to="{ name: 'About' }">About</router-link>

この方法を使用する利点の 1 つは、大規模なアプリケーションのルート パスを変更する場合に、面倒なすべてのリンク パスの変更を開始する必要がないことです。

動的ルーティング

不必要なページの繰り返しを避けるために動的ルーティングの使用を必要とする状況が発生する可能性があります。 たとえば、果物のリストがあり、ユーザーが特定の果物をクリックできるようにし、その果物の詳細のみを果物の詳細ページに表示するとします。 この場合、動的ルーティングを使用します。

XNUMXつのページがあります。XNUMXつはリスト内の果物を紹介するページで、もうXNUMXつは各果物の詳細を表示するページです。これは、果物の詳細を入力するための「青写真」ページです。 Vueフォルダーにページを作成してから、ルートをに追加します。 routes アレイ：

import FruitsPage from '../views/FruitsPage.vue';
import FruitDetails from '../views/FruitDetails.vue'; const routes = [ { path: '/fruits', name: 'Fruits', component: FruitsPage, }, { path: '/fruits/:id', name: 'FruitDetails', component: FruitDetails, },
];

私たちは、 FruitDetails ページ、ダイナミックを追加しました id プロパティを取得するので、 id パラメータを使用し、それを使用して、そのページに表示される特定のデータをクエリします。 $route.params テンプレートでは、ルートを動的にします。

FruitsPage、アプリケーションにループするフルーツの配列があるとすると、次のように、各フルーツをparamsの横にあるリンクでラップできます。

<!-- FruitsPage.vue --> <template> <h1>Fruits page</h1> <div :key="fruit.id" v-for="fruit in fruits"> // dynamic linking by attaching the id as params <router-link :to="{ name: 'FruitDetails', params: { id: fruit.id } }"> <h3>{{ fruit.name }}</h3> </router-link> </div>
</template> <script> export default { data() { return { fruits: [ { id: 1, name: 'Apple', description: "Apples are an incredibly nutritious fruit.", }, { id: 2, name: 'Mango', description: 'A mango is an edible stone fruit produced by the tropical.', }, { id: 3, name: 'Banana', description: 'A banana is an elongated, edible fruit of the genus Musa.', }, ], }; }, };
</script>

この時点で、ユーザーが各果物をクリックすると、果物が FruitDetails アクセスできるページ id パラメータを設定し、それを使用して、どの果物の詳細を FruitDetails ページで見やすくするために変数を解析したりすることができます。

ルートパラメータにアクセスする

これまで、パラメータを特定のページに動的に渡す方法を見てきました。次に、そのパラメータにアクセスする方法を見てみましょう。 FruitDetails ページ。 Vueのパラメーターにアクセスする方法はXNUMXつあります–経由 $route.params または小道具を利用する：

使い方 $ route.params

パラメータには、を介して直接アクセスできます $route.params:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ $route.params.id }}</p>
</template>

または、私たちの中でそれにアクセスすることができます data() を使用する方法 this:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p>
</template> <script> export default { data() { return { id: this.$route.params.id, }; }, };
</script>

Vueプロップの使用

ルートを介して動的にデータにアクセスするもうXNUMXつの簡単な方法は、小道具を使用することです。 最初に設定する必要があります props 〜へ true ルート構成オブジェクト内：

{ path: '/fruits/:id', name: 'FruitDetails', component: FruitDetails, props: true,
},

このように、次に行う必要があるのは追加することだけです props オプションを script タグを付けてから、私たちの中で小道具を利用します template タグ：

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p>
</template> <script> export default { props: ['id'], };
</script>

404エラー–ルートが見つかりません

ユーザーが存在しないルートに移動した場合、Vueはページをロードしますが、コンポーネントは含まれず、空のページを生成します。 この場合、最善の方法は、404ページを表示し、ボタンを押してホームページまたは行きたい場所に移動することです。

これは、404ページのコンポーネントを作成し、ルーター構成ファイルのルート配列に404ルートを追加することで簡単に処理できますが、今回は正規表現を使用して、以前に宣言されていないすべてのルートをキャッチします。

{ path: '/:catchAll(.*)', name: 'ErrorPage', component: ErrorPage,
}

　 :catchAll の正規表現を受け取る動的セグメントです (.*) Vueルーターは、ユーザーが移動するルートがルーターの構成ファイルで定義されているかどうかを確認するために使用します。 そのようなルートが存在しない場合、ユーザーはコンポーネントに誘導されます。この場合は、 ErrorPage 成分：

<template> <h2>404 Page</h2> <p>This is a 404 page</p> <p>Visit home page <router-link to="/">here</router-link></p>
</template>

リダイレクト

ユーザーが特定のルートにアクセスしたときにリダイレクトされるようにする状況では、たとえば、以前のルートが使用されなくなった場合、ユーザーがそのルートにアクセスしたときに新しいルートにリダイレクトされるようにします。 これは、ルート構成配列に新しいオブジェクトを追加することで簡単に実現できます。 redirect フィールド：

{ path: '/fruits', name: 'Fruits', component: FruitsPage,
},
{ path: '/all-frults', redirect: '/fruits',
},

上記のすべてのコードは、ユーザーがアクセスした場合、パスが /all-fruits、それはそれらをにリダイレクトします /fruits ルートのようにリストされたキーがあります。

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

これまで、ルーティングについて多くのことを学びましたが、もうXNUMXつ知りたいことがあります。それは、プログラムによるナビゲーションを実行する方法です。 プログラマティックナビゲーションは、ログインやサインアップアクションなど、ルート上で発生する特定のアクションに基づいて、または「戻る」ボタンなどの特定のボタンをクリックすることによって、ユーザーがリダイレクト/リダイレクトされる状況として定義されます。

ルーターの履歴

ブラウザの履歴を使用して、好みに応じて簡単に前後に移動できます。 あなたが思い出すなら、私たちは createRouter() 設定したルーター構成ファイルの関数 history 値。これにより、VueルーターはWebアプリケーションを介してルーティングするときにルーターの履歴を追跡できます。

これにより、ボタンのクリックなどの条件に基づいて、ブラウザの履歴をトラバースできます。

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p> <button @click="goBack">Go Back</button>
</template> <script> export default { props: ['id'], methods:{ goBack(){ this.$router.go(-1) } } };
</script>

また、を使用して前進することを決定することもできます 1 -1 そして、2ステップ移動したいとします。どちらかを使用できます。 2 or -2.

プッシュ

push() 通常、アクションが発生した後に使用され、履歴スタックに新しいエントリを追加します。 たとえば、ユーザーが正常にサインインした場合、プログラムでダッシュボードページに移動したいとします。 これは、ルート名の横にpushメソッドを含めることで実現されます。

this.$router.push({ name: 'Dashboard' });

まとめ

ルーティングはVueのコア機能のXNUMXつです。 あなたが構築しているのでない限り シングルページアプリケーション（SPA）、ユーザーがそれらをナビゲートできるように、複数のページをランディングページに接続する必要があります。

このガイドでは、ルーティングとは何か、どのようにインストールするかについて見てきました。 vue-router 新規および既存のプロジェクトで、遅延読み込みを実行する方法、ルート間をナビゲートする方法、動的ルーティングを実行する方法、ルートパラメータにアクセスする方法、およびプログラムによるナビゲーションを実行する方法。

• コインスマート。 ヨーロッパで最高のビットコインと暗号通貨取引所。
• Platoblockchain。 Web3メタバースインテリジェンス。 知識の増幅。 出入り自由。
• CryptoHawk。 アルトコインレーダー。 無料トライアル。
• ソース：https：//stackabuse.com/guide-to-vue-router/