Vue3 のルーティング機能: SPA アプリケーション用のルーティング ジャンプの実装

Vue3 は現在最も人気のある JavaScript フレームワークの 1 つであり、最近のアップデートで Vue3 には非常に便利な新機能がいくつか導入されました。その 1 つはより強力なルーティング機能です。

Vue3 と Vue2 のルーティング機能にはいくつかの違いがあるため、Vue3 のルーティング機能を学ぶ前に Vue2 のルーティングを復習する必要があります。

Vue2 のルーティングは、Vue Router を使用して実装されます。まず、プロジェクトに Vue Router をインストールし、それを Vue インスタンスで構成する必要があります。単純なルーティング システムの場合、各パスとそれに対応するコンポーネントを指定するだけで済みます。

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home.vue'
import About from '@/components/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

上記のコードでは、「/」と「/about」という 2 つのルートを含む Vue Router インスタンスを作成します。ユーザーがこれらの URL にアクセスすると、Vue Router は対応するコンポーネントをレンダリングします。

Vue3 のルーティングにおける主な変更点は、新しい API を使用してルーティング関数の使用を簡素化したことです。次に、Vue3のルーティング機能について詳しく紹介していきます。

Vue3 ルーティングの作成

まず、Vue Router 4 をインストールする必要があります:

npm install vue-router@4

次に、Vue Router を Vue アプリケーションにインポートし、Vue Router インスタンスを作成する必要があります:

import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/components/Home.vue'
import About from '@/components/About.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

export default router

Vue2 のルーティングとは異なり、ルートの作成には new Router() の代わりに createRouter() 関数を使用することに注意してください。

Vue3 のルーティングにおける主な変更点は、ルーティング関数がより宣言的なアプローチを採用していることです。 createWebHistory() 関数を使用して、HTML5 履歴モードの使用を指定します。これは、ページ全体をリロードすることなく、ページ URL をより安全に更新できるようにする比較的新しいテクノロジーです。

ルーティングの定義

ルーティングの定義方法はVue2と同様です。ルート配列を使用してルートを定義できます。各ルートはパスと対応するコンポーネントで構成されます。

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

ルート パラメータ

ルート パラメータを使用すると、URL に変数値を持たせることができます。たとえば、次のルートと URL を設定できます:

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

これにより、URL の :id 部分が、任意の文字列値を受け入れることができるパラメータになります。たとえば、:

/user/1
/user/abc
/user/123abc

ルーティング パラメーターにアクセスするには、コンポーネントで $route.params を使用します。例:

export default {
  name: 'User',
  created() {
    console.log(this.$route.params.id)
  }
}

これにより、コンポーネントが作成されるたびにルート パラメーターが出力されます。

名前付きルーティング

ルートを定義するときに、ルートに名前を付けることができます。これは、次のような特定のルート ナビゲーション メソッドに役立ちます。

const routes = [
  { path: '/', component: Home, name: 'home' },
  { path: '/about', component: About, name: 'about' },
  { path: '/user/:id', component: User, name: 'user' }
]

$name 属性を通じてアクセスできる名前付きルートを定義します。

router.push({ name: 'user', params: { id: 123 }})

これはパラメータ ID を持つ User コンポーネントにジャンプします。

ルート ナビゲーション

次のメソッドを使用して別のルートに移動できます:

// 带路径的导航
router.push('/about')

// 带命名的导航
router.push({ name: 'user', params: { id: 123 }})

// 重定向到另一个路由
router.replace('/about')

コンポーネントでルーティングを使用する場合、$route オブジェクトを使用してアクセスできます。現在のルート情報です。

export default {
  name: 'About',
  created() {
    console.log(this.$route.path)
  }
}

ルート ガード

ルート ガードはナビゲーションを検査するメカニズムであり、すべてのルートをインターセプトする前または後にコードを実行できるようにします。 Vue3 では、次のルート ガードを使用できます。

const router = createRouter({
  routes: [...]
})

router.beforeEach((to, from, next) => {
  // 在此处添加路由守卫代码
  next()
})

beforeEach ガードでは、ユーザーがログインしているかどうかを確認したり、ナビゲーションを続行するために必要なアクションをユーザーに完了させたりできます。

概要

Vue3 ではルーティングが大幅に改善されており、Vue2 よりも使いやすくなっています。より宣言的なアプローチが取られ、ルートの定義と使用が容易になります。さらに、Vue3 では HTML5 履歴モードも導入されており、ルーティングがより安全で使いやすくなります。

Vue3 のルーティング機能を使用すると、独自の SPA アプリケーションを作成するのに役立ち、簡単にジャンプしたりナビゲートしたりできます。

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