Vue ドキュメントでのルーティング関数の使用方法

Vue は、コンポーネント、状態管理、ルーティング機能など、多数のフロントエンド テクノロジと概念を使用する人気のある JavaScript フレームワークです。 SPA (シングル ページ アプリケーション) アプリケーションの場合、ルーティングは非常に重要な部分です。 Vue Router は、アプリケーションのルーティングを管理する簡単な方法を提供します。これにより、アプリケーション内でルートとそれに対応するコンポーネントを定義できるようになります。この記事では、Vue ドキュメントでルーティング関数を使用する方法を紹介します。

Vue Router のインストール

Vue Router の使用を開始する前に、Vue Router をインストールする必要があります。 npm:

$ npm install vue-router

Vue Router の基本構造

Vue では、ルートは URL アドレスとコンポーネント間の対応関係です。以下は Vue Router の基本構造です。

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

公式に提供されているコンストラクター VueRouter を使用して、新しいルーティング インスタンスを作成できます。この例では、ルーティング パターンとルーティング ルールを定義します。ルーティングモードにはハッシュモードとヒストリーモードの2つがありますが、ここではヒストリーモードを選択します。ルーティング ルールは複数のルートに分割されており、各ルートにはパス (path)、名前 (name)、および対応するコンポーネント (component) があります。

ルーティングのレンダリング方法

Vue アプリケーションでルーティングを使用するには、まずルーティングの対応する部分をホストするルーター ビュー コンポーネントをセットアップする必要があります。コンポーネントの場所とルーティング ルール間のパスの一致に基づいて、Vue は正しいコンポーネントを対応する場所に自動的にレンダリングします。以下に示すように:

<template>
  <div id="app">
    <header>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </header>
    <router-view></router-view>
  </div>
</template>

この例では、ルーティング コンポーネントはルーター ビュー コンポーネントに表示されます。

動的パラメータの使用

ルーティングで動的パラメータを使用する必要がある場合があります。たとえば、ブログ アプリケーションでは、記事 ID によって記事のコンテンツを取得する必要があります。バックエンドでは、URL に「/blog/123」などの動的な記事 ID パラメーターが含まれます (123 は記事 ID)。 Vue では、ルーティング ルールを使用して動的パラメータを設定できます。

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/blog/:id',
      name: 'blog',
      component: Blog
    }
  ]
})

この例では、動的パラメータを使用してルーティング ルールを定義します。パラメータは「:id」のようにコロンで始まります。 「/blog/123」が一致した場合、「123」が動的パラメータになります。同時に、コンポーネント内でこのパラメータを使用することも非常に簡単です。

export default {
  data () {
    return {
      postId: null
    }
  },
  created () {
    this.postId = this.$route.params.id
    // 根据post id获取文章
  }
}

コンポーネント インスタンスでは、パラメータは this.$route.params.id を通じて取得できます。

プログラムによるナビゲーション

この章の冒頭で、Vue Router インスタンスを作成しました。この例を使用すると、ルーティングの切り替えをプログラムで実装できます。 Vue Router は、プログラムによるナビゲーションを実装するための 2 つのメソッド、$router.push() と $router.replace() を提供します。

上記の例では、2 つのルーティング ボタンがあり、それぞれが異なるルートに接続されています。ボタンのクリック イベントをルーティングすることで、基になる JavaScript で $router.push() を使用して特定のルートに移動できます。

<template>
  <div id="app">
    <header>
      <button @click="$router.push('/')">Home</button>
      <button @click="$router.push('/about')">About</button>
    </header>
    <router-view></router-view>
  </div>
</template>

ナビゲーション ガード

ルーティングが切り替わると、認証、データのロードなど、一部の操作を実行する必要がある場合があります。 Vue Router は、この問題を解決するために Navigation Guard を提供します。ナビゲーション ガードは、ルートの前、後、またはルートにジャンプするときなど、ルートをナビゲートするときに実行できる一連の関数です。 Vue Router は、グローバル ガード、コンポーネント ガード、ルーティング ガードの 3 種類のナビゲーション ガードを提供します。

グローバル ガード

グローバル ガードは、アプリケーション全体で定義されたガードであり、すべてのページで有効になります。 Vue Router は、以下を含むいくつかのグローバル ガードを提供します:

• beforeEach(to, from, next): ルートに入る前に実行されます。
• afterEach(to, from): ルートが入った後に実行されます。

コンポーネント ガード

コンポーネント ガードはコンポーネント内で定義されたガードで、コンポーネントに入るときに実行されます。 Vue Router は次のコンポーネント Guard を提供します:

• beforeRouteEnter(to, from, next): コンポーネントに入る前に実行されるため、コンポーネント インスタンスにアクセスできません。
• beforeRouteUpdate(to, from, next): ルートが更新され、コンポーネント インスタンスにアクセスできるときに実行されます。
• beforeRouteLeave(to, from, next): コンポーネントから離れるときに実行され、コンポーネントのインスタンスにアクセスできます。

ルーティング ガード

ルーティング ガードは、ルートの定義時に定義され、特定のルートで有効になるガードです。 Vue Router は次のルーティング ガードを提供します:

• beforeEnter(to, from, next): ルートに入る前に実行され、このルートでのみ有効になります。
• beforeResolve(to, from, next): ルートが入ってコンポーネント インスタンスにアクセスできるときに実行されます。

概要

ルーティングは Vue アプリケーションの非常に重要な部分であり、Vue Router はルーティングを管理する簡単な方法を提供します。この記事では、Vue Router の基本構造、レンダリング方法、動的パラメーター、プログラム ナビゲーション、ナビゲーション ガードについて紹介しました。 Vue Router は強力で使いやすいルーティング ライブラリです。Vue アプリケーションを拡張したい場合は、これらのドキュメントで提供されている API を必ず参照してください。

以上がVue ドキュメントでのルーティング関数の使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。