Vue Routerの使用手順を紹介した記事

フロントエンド テクノロジの継続的な開発に伴い、シングル ページ アプリケーション (シングル ページ アプリケーション、SPA) 開発手法を採用するアプリケーションが増えています。フロントエンド開発の重要なツールの 1 つとして、Vue.js はますます多くの開発者にとって推奨されるフレームワークの 1 つになりました。 Vue.js を使用してシングルページ アプリケーションを構築すると、Vue Router が誕生します。

Vue Router は、Vue.js の公式ルーティング マネージャーです。これにより、簡単な構成でアプリケーション ルーティング ルールを定義し、これらのルールをコンポーネントにマッピングして、単一ページ アプリケーションでページ ジャンプ効果を実現できます。この記事では、Vue Router を使用する手順を紹介します。

ステップ 1: インストール

Vue Router を使用するには、まずプロジェクトにインストールする必要があります。 npm または Yarn を介してインストールできます:

npm install vue-router --save

または

yarn add vue-router

ステップ 2: ルーティング インスタンスを作成する

Vue Router の中核となる部分は、ルーティング インスタンスを作成することです。通常、このインスタンスはルーティング設定ファイル router.js (または他の名前) に作成します。まず、Vue と Vue Router を導入する必要があります:

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

次に、ルーティング ルールを定義する必要があります:

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/contact', component: Contact }
]

ここで、routes はルーティング ルールを含む配列です。各ルーティング ルールは、パスとコンポーネントという 2 つの属性を含むオブジェクトです。このうち、pathはURLのパスを表し、componentはそのパスに対応するコンポーネントを表します。

最後に、Vue Router インスタンスを作成し、定義したルート ルールを渡す必要があります:

const router = new VueRouter({
  mode: 'history',
  routes
})

インスタンスを作成するとき、モードやルートなどのいくつかのプロパティを設定できます。など、これらはルーティング関連のパラメータを指定するために使用されます。

ステップ 3: ルーティング インスタンスをルート インスタンスにマウントする

ルーティング インスタンス (Vue Router オブジェクト) をルート インスタンスで使用するため、インスタンスをルート インスタンスにマウントする必要があります真ん中。例:

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

ここでは、ルーティング インスタンス (ルーター) をルート Vue インスタンスに渡し、ルート コンポーネント (アプリ) をアプリケーションの #app ノードにレンダリングします。

ステップ 4: ルーティング関連コンポーネントを使用する

Vue Router インスタンスを作成し、ルート Vue インスタンスにマウントしたら、それを Vue コンポーネント間に追加して、ルート ナビゲーションを実行できます。

Vue Router には、router-view と router-link という 2 つの重要なコンポーネントがあります。 Router-view はルーティング コンポーネントの特定のコンテンツを表示するために使用され、router-link は異なるルート間を移動するためのリンクです。

たとえば、アプリケーションのルート コンポーネントでは、router-view を使用して、さまざまなルートに対応するコンポーネントを表示できます。

<template>
  <div>
    <nav>
      <router-link>Home</router-link>
      <router-link>About</router-link>
      <router-link>Contact</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

ここでは、router-link タグを通じていくつかのルートを作成しました。リンク。ルーティング リンクをクリックすると、Vue Router は自動的に URL を更新し、ルーティング コンポーネントをルータービューにレンダリングします。

ステップ 5: ルーティング フック関数を使用する

Vue Router は、ナビゲーション プロセスのロジックを処理するためのいくつかのフック関数 (ルーティング ガード) も提供します。これらのルーティング フックは、グローバルに使用することも、ルートごとに使用することもできます。

たとえば、グローバル ルーティング フック関数 beforeEach では、ユーザーのログイン検証ロジックを実装できます。

router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) {
    if (store.getters.isAuthenticated) {
      next()
    } else {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    }
  } else {
    next()
  }
})

上記のコードでは、beforeEach ルーティング フックを使用して、ユーザーがログインしているかどうかを確認します。認証されました。ユーザーが認証されている場合はナビゲーションを続行し、認証されていない場合はユーザーをログイン ページにリダイレクトします。

beforeEach ルーティング フックに加えて、Vue Router はルーティング ナビゲーション プロセスで使用される他のフック関数も提供します。たとえば、beforeRouteEnter は、新しいルートに入る前にコンポーネント インスタンス オブジェクトを取得するために使用されます。 beforeRouteUpdate は、現在のコンポーネントが再利用されるときにコンポーネント インスタンス オブジェクトを取得するために使用されます。 beforeRouteLeave は、ナビゲーションが現在のコンポーネントから離れるときにインスタンス オブジェクトを取得するために使用されます。

上記は Vue Router を使用する手順です。 Vue Router は、非常に豊富な構成オプションとルーティング フック機能のセットを提供しており、開発プロセスを簡素化し、アプリケーションのパフォーマンスとユーザー エクスペリエンスを向上させるのに役立ちます。

以上がVue Routerの使用手順を紹介した記事の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。