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

王林

リリース： 2023-06-11 10:31:36

オリジナル

1171 人が閲覧しました

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