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

Vue3 は Vue の最新バージョンであり、Vue2 バージョンと比較してルーティング機能が大幅に変更されました。 Vue3 のルーティング機能は、シングル ページ アプリケーション (SPA) を実装するための重要なツールの 1 つとして広く使用されています。この記事では、Vue3のルーティング機能について、ルーティングジャンプとその実装も含めて詳しく解説していきます。

1. Vue3 ルーティング機能の概要

Vue3 のルーティング機能は、主にルーティング インスタンスとルーターの 2 つの部分で構成されます。このうち、ルーティング インスタンスは Vue Router インスタンスであり、ルートとそのジャンプ パスを定義するために使用されます。ルーターは、ルーティング インスタンスを Vue インスタンスに挿入して有効にし、ルーティング ジャンプを有効にする責任があります。

2. ルーティング インスタンス

1. ルーティング インスタンスの作成

Vue3 では、Vue Router 関数を呼び出すことでルーティング インスタンスを作成できます。コードは次のとおりです。

import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    },
    {
      path: '/contact',
      component: Contact
    }
  ]
})

上記のコードでは、createRouter() 関数は、2 つのプロパティ (history と routes) を含む構成オブジェクトを受け入れることができます。 。このうち、history はルーティング モードの指定に使用され、routes はルーティング テーブルの定義に使用されます。

2. ルーティング テーブルの定義

ルーティング テーブルは、ルーティング構成オブジェクトの配列で構成されます。配列内の各オブジェクトは、次の属性を含むルートの定義を表します。 :

• path: ルーティング パス;
• component: ルーティング コンポーネント;
• name : ルート名;
• meta: ルーティングのメタ情報。

ルーティング テーブルでは、path と component を使用してルーティング パスとルーティング コンポーネントを定義できます。サンプル コードは次のとおりです。

import Home from '@/views/Home.vue';
import About from '@/views/About.vue';
import Contact from '@/views/Contact.vue';

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

ルーティング パスでは、プレースホルダーを使用して動的パラメータを表すことができます。サンプル コードは次のとおりです:

const router = createRouter({
  routes: [
    {
      path: '/user/:id',
      component: User,
      props: true
    }
  ]
})

##上記の例では、ルーティング パスのコロン

/user/:id

は、パスが動的パラメータと一致できることを示します。props 属性を通じて、動的パラメータをコンポーネント プロパティとしてルーティング コンポーネントに渡すことができます。

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

3. Vue3 では、ネストされたルーティングを使用してアプリケーションのルーティング構造を整理できます。ネストされたルーティングとは、ルーティング パスに複数のレベルが含まれる状況を指します。サンプル コードは次のとおりです:

const router = createRouter({
  routes: [
    {
      path: '/',
      component: Layout,
      children: [
        {
          path: '',
          component: Home
        },
        {
          path: '/about',
          component: About
        },
        {
          path: '/contact',
          component: Contact
        }
      ]
    }
  ]
})

上記の例では、

/# の下に

Layout# という名前のパスを定義しました。 ## パス。## のルーティング コンポーネントを取得し、ネストされたルートの親パスとして使用します。 レイアウトコンポーネントには、異なるパスに対応する 3 つのサブルートがあります。 ルート ガード

ルート ガードは、ルート ジャンプの前後にいくつかの論理演算を実行するために使用されます。 Vue3 では、ルーティング ガードは主に、グローバル ガード、ルーティング ガード、コンポーネント ガードの 3 つのカテゴリに分類されます。
4. グローバル ガードには 3 つのタイプがあります:

beforeEach

: ルーティング ジャンプの前にロジックを実行します;

• beforeResolve : ルート解析が完了した後、ルート マッチングの前にロジックが実行されます;
• afterEach: ロジックはルート ジャンプ後に実行されます。
• ルート ガードは 2 つのタイプに分類されます:

beforeEnter

: ルートに入る前に実行されるロジック;

• beforeLeave: ルートを離れる前に実行されるロジック。
• コンポーネント ガードは、次のようなコンポーネント レベルのルーティング用です:

beforeRouteEnter

: コンポーネントがルートに入る前に実行されるロジック。

• ##beforeRouteUpdate: コンポーネントがルートを更新する前に実行されるロジック;
##beforeRouteLeave
• : コンポーネントがルートを離れる前に実行されるロジック。
3. Router
• ルーティングの注入

ルーティング インスタンスを作成した後、それを Vue インスタンスに注入する必要があります。効果。 Vue3 では、

createApp

関数を呼び出すことで Vue インスタンスを作成できます。サンプル コードは次のとおりです:

1. import { createApp } from 'vue';
   import App from './App.vue';
   import router from './router';
   
   const app = createApp(App);
   app.use(router);
   app.mount('#app');

上記のコードでは、

createApp

を使用します。関数を使用して Vue インスタンスを作成し、use メソッドを通じてルーティング インスタンス

router

を Vue インスタンスに挿入します。 ルート ジャンプVue3 では、

router.push

メソッドを呼び出すことでルート ジャンプを実装できます。
2. router.push
このメソッドは、ジャンプする必要があるルーティング パスを指定するパラメータを受け取ります。サンプル コードは次のとおりです。

import { RouterLink } from 'vue-router';

<RouterLink to="/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>
<RouterLink to="/contact">Contact</RouterLink>

上記の例では、 <router-link></router-link> コンポーネントの代わりに <routerlink></routerlink> コンポーネントを使用します。 Vue2バージョンを使用してルートジャンプを実装します。

上記は、ルーティング インスタンスとルーターの使用、ルーティング ジャンプの実装など、Vue3 のルーティング機能の詳細な説明です。この記事を読むことで、Vue3 のルーティング機能についての理解が深まったと思います。

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