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

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

PHPz

リリース： 2023-06-21 09:33:29

オリジナル

1289 人が閲覧しました

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 サイトの他の関連記事を参照してください。