ルーティングを使用して Vue で SPA アプリケーションを実装する方法

SPA (シングル ページ アプリケーション) は最新の Web アプリケーション アーキテクチャであり、その主な利点は、従来のマルチページ アプリケーションと比較して優れたユーザー エクスペリエンスを提供できることです。 Vue.js は、優れたルーティング機能を提供する人気のフロントエンド フレームワークであり、SPA アプリケーションの実装によく使用できます。この記事では、ルーティングを使用して Vue で SPA アプリケーションを実装する方法を紹介します。

Vue Router の紹介

Vue Router は、Vue.js が公式に提供するルーティング マネージャーです。これは Vue.js アプリケーションにうまく統合でき、シングルページ アプリケーションのルーティング機能の実装に役立ついくつかの API を提供します。 Vue Router は、ルーティング ナビゲーションを実装するメカニズムを提供するだけでなく、ルーティング パラメータ、ルーティング ステータス、オブジェクト転送などを処理するためのいくつかの機能も提供します。

Vue Router のインストール

Vue Router を使用するには、まず Vue Router をインストールする必要があります。 npm または Yarn を通じてインストールできます。ターミナル ウィンドウで次のコマンドを実行します:

npm install vue-router --save

または

yarn add vue-router

インストールが完了したら、Vue.js アプリケーションのメイン エントリ ファイルに Vue Router を導入する必要があります:

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes
})

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

最初に Vue と VueRouter を導入し、次に VueRouter を Vue にインストールします。次に、ルーター インスタンスを作成し、それを Vue.js アプリケーション インスタンスに渡します。

ルーティングの構成

Vue Router を使用するには、アプリケーション内の URL パスごとにどのコンポーネントをレンダリングする必要があるかを Vue Router に伝えるルーティング テーブルを定義する必要があります。配列を使用してルーティング テーブルを定義できます。

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

この例では、3 つのルーティング ルールを定義します。ユーザーが「/」パスにアクセスすると、Home コンポーネントが表示されます。ユーザーが「/about」パスにアクセスすると、About コンポーネントが表示されます。ユーザーが「/contact」パスにアクセスすると、Contact コンポーネントが表示されます。レンダリングされる。

Vue Router インスタンスの Routes オプションを使用して、アプリケーションにルーティング テーブルを設定できます:

const router = new VueRouter({
  routes
})

上記の設定をすべて完了したら、Angular 要素を使用してマルチビュー アプリケーションを実装できます。 。

ルーティング リダイレクト

特定の URL パスを別のパスにリダイレクトする必要がある場合があります。 Vue Router はルート リダイレクトもサポートしており、リダイレクトを通じて、ある URL アドレスを別のアドレスに転送できます。リダイレクト ルーティング ルールを定義できます。

const routes = [
  { path: '/', redirect: '/home' },
  { path: '/home', component: Home }
]

この例では、ユーザーが「/」にアクセスすると、自動的に「/home」ルートにリダイレクトされ、Home コンポーネントが表示されます。

ネストされたルーティング

Vue Router では、ネストされたルーティングを使用して、ネストされたビューを実装できます。ネストされたルーティングとは、ルートにサブルートを含めることができ、各サブルートに独自のパスとコンポーネントを含めることができることを意味します。

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

この例では、親ルート MainLayout と 3 つの子ルート Home、About、Contact を定義します。ユーザーがルート パス / にアクセスすると、MainLayout コンポーネントがレンダリングされ、MainLayout コンポーネントの「親」の役割を果たします。親コンポーネントの <router-view> ディレクティブは、サブビューの表示および/またはネストに使用されます。

名前付きルーティング

Vue Router では、名前を使用してルートを定義し、アプリケーションの管理とリファクタリングを容易にすることができます。

const routes = [
  { path: '/user/:username', name: 'user', component: User }
]

この例では、name 属性を使用してルート名を指定します。名前付きルートを使用すると、パスではなく名前でルートに移動できます。

<router-link :to="{ name: 'user', params: { username: 'me' }}">My Profile</router-link>

ユーザーが My Profile リンクをクリックすると、自動的に「ユーザー」ルートに移動し、ユーザーコンポーネントにリクエストを送信し、パラメータ「me」を渡します。

ルーティング パラメーター

Vue Router では、ルーティング パラメーターは、:/user/:username などの URL の特別な部分を参照します。ここで、:username はルーティング パラメーターです。コンポーネントの $route.params を使用してルート パラメーターにアクセスできます。

const User = {
  template: '<div>User {{ $route.params.username }}</div>'
}

この例では、$route.params.username を通じてルート パラメーターにアクセスし、User コンポーネントをレンダリングします。ユーザーが「/user/me」にアクセスすると、User コンポーネントがレンダリングされ、「User me」が表示されます。

ナビゲーション ガード

Vue Router は、ルート ジャンプの前後にテストや操作を実行できるいくつかのナビゲーション ガードを提供します。

const router = new VueRouter({
  routes
})

router.beforeEach((to, from, next) => {
  // ...
})

router.afterEach((to, from) => {
  // ...
})

この例では、 を定義します。 beforeEach および afterEach ナビゲーション フック。 beforeEachフックはルートがジャンプする前に実行され、afterEachフックはルートがジャンプした後に実行されます。これらは to パラメータと from パラメータの両方を受け取ることができます。to パラメータはジャンプするターゲット ルートを示し、from パラメータはジャンプするソース ルートを示します。 beforeEach フックでは、いくつかの権限チェックやその他の制御ロジックを実行できます。

概要

Vue Router は、SPA アプリケーションを適切に実装できる、柔軟で使いやすいルーティング マネージャーです。この記事では、インストール、ルートの構成、ルート リダイレクト、ネストされたルート、名前付きルート、ルート パラメーター、ナビゲーション ガードなど、Vue Router の基本的な使用法を紹介しました。これらは Vue Router の一般的な用途であり、シングルページ アプリケーションをより適切に構築するのに役立ちます。

Vue Router について詳しく知りたい場合は、Vue Router の公式ドキュメントを参照してください。

以上がルーティングを使用して Vue で SPA アプリケーションを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。