VUE3 基本チュートリアル: ルーティングとナビゲーション

VUE3 は、現在最も人気のあるフロントエンド開発フレームワークの 1 つで、最新の Web アプリケーションを構築するためのシンプル、柔軟、効率的な方法を提供します。ルーティングとナビゲーションは VUE3 フレームワークの重要な機能の 1 つであり、これらによりページ間の切り替えや管理を簡単に行うことができます。

このチュートリアルでは、VUE3 フレームワークにおけるルーティングとナビゲーションの基本概念と使用法を紹介し、VUE3 のルーティングとナビゲーション機能をすぐに使い始めるのに役立ちます。

1. ルーティングの基本概念

ルーティングとは、異なる URL を介して異なるページにアクセスする方法を指します。 VUE3 では、ルーティングは vue-router ライブラリを通じて実装されます。 vue-router は、ルーティングの定義および管理機能を提供します。

vue-router を使用する前に、vue-router ライブラリをインストールして導入する必要があります。インストール方法は以下の通りです。

npm install vue-router

vue-routerライブラリの導入方法は以下の通りです。

import { createRouter, createWebHashHistory } from 'vue-router'

このうち、createRouterはルートを作成するメソッドで、createWebHashHistoryはルートを作成するメソッドです。ルーティングにハッシュ モードを使用する。

ルートを定義するときは、ルートのパスとコンポーネントを定義する必要があります。 Path はルートにアクセスするための URL、component は対応するコンポーネントです。

例:

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

上記のコードは 2 つのルートを定義しています。1 つはルート パス '/'、対応するコンポーネントは Home、もう 1 つは '/about'、対応するコンポーネントはについて 。

ルーティング インスタンスを作成するときは、以下に示すように、定義されたルートを渡す必要があります。

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

history はルーティング モードを指定し、createWebHashHistory はハッシュ モードの使用を示します。他のモードには、履歴モードと抽象モードが含まれます。ルートはルーティング設定配列を指します。

2. ナビゲーションの基本概念

VUE3 では、ルーティングを通じて URL と対応するコンポーネントを定義した後、ナビゲーションを使用してページ間の切り替えやジャンプを行う必要があります。

ナビゲーションには主に、プログラムによるナビゲーションと宣言的なナビゲーションの 2 つの方法があります。

2.1 プログラムによるナビゲーション

プログラムによるナビゲーションとは、JavaScript コードによるページのジャンプと切り替えを指します。 Vue Router は、このナビゲーション メソッドを実装するためのメソッドをいくつか提供します。

一般的に使用されるメソッドの一部を次に示します:

• router.push: ターゲット ページにジャンプし、ルーティング履歴に新しいレコードを追加するために使用されます。

router.push('/home')

• router.replace: ターゲット ページにジャンプするために使用されますが、ルーティング履歴に新しいレコードは追加されません。

router.replace('/home')

• router.go: ルーティング履歴内の指定されたステップ数 (正または負の数) を前後に移動するために使用されます。

router.go(-1) //后退一步

2.2 宣言型ナビゲーション

宣言型ナビゲーションとは、テンプレート内の宣言を介してページを切り替えたりジャンプしたりすることを指します。 Vue Router では、router-link コンポーネントを使用して宣言型ナビゲーションを実装できます。

router-link コンポーネントは、ルーティング リンクを介してページにジャンプするために使用される タグとしてレンダリングできます。

例:

<router-link to="/home">Home</router-link>

上記のコードはリンクをレンダリングすることを意味し、リンクをクリックすると「/home」パスにジャンプします。

同時に、ルーターリンクコンポーネントは、パラメーターを使用したルーティングもサポートしています。例:

<router-link :to="{ path: '/user/'+userId }">User</router-link>

上記のコードは、リンクのレンダリングを意味します。リンクをクリックすると、「/user」にジャンプします。 /123' パスこのうち 123 はユーザー定義パラメータです。

3. ルーティングの高度な概念

VUE3 には、基本的なルーティングおよびナビゲーション機能に加えて、ルーティングのネストや名前付けなど、ルーティングの高度な概念もいくつかあります。ルーティング、ルートガードなど

3.1 ルートのネスト

ルート ネストとは、複数のルートを組み合わせて親子関係を形成することを指します。 VUE3 では、ルートのネストはサブルートを定義することによって実現されます。

例:

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

上記のコードでは、Layout という名前の親ルートが定義されており、これには 2 つのサブルート、つまりルート パス '' と '/about' が含まれています。子ルートは親ルートの 975b587bf85a482ea10b0a28848e78a4 にレンダリングされます。

3.2 名前付きルーティング

名前付きルーティングとは、プログラム内での呼び出しを容易にするためにルートの名前を定義することを指します。 Vue Router では、ルートの名前は name 属性を通じて定義できます。

例:

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

上記のコードでは、ルート パス '/' と '/about' のルートには、それぞれ home と about という名前が付けられます。

プログラム ナビゲーションと宣言型ナビゲーションでは、対応するルート名を使用してページのジャンプや切り替えを行うことができます。

3.3 ルート ガード

ルート ガードとは、ルートがジャンプするときに、いくつかの特定の要件を達成するために、いくつかの事前設定されたフック関数を通じてルート ジャンプのプロセスを制御できることを意味します。 VUE3 では、Vue Router は 2 種類のグローバル ルート ガードとローカル ルート ガードを提供します。

グローバル ルート ガードとは、すべてのルートを一元的に制御することを指し、通常、一部のグローバルな運用に使用されます。グローバル ルーティング ガードのフック関数には、beforeEach、beforeResolve、afterEach が含まれます。

ローカル ルート ガードは、特定のルートまたはルート グループの特定の制御を指し、通常は一部のローカル操作に使用されます。ローカル ルート ガードのフック関数には、beforeEnter、beforeRouteUpdate、および beforeRouteLeave が含まれます。

例:

router.beforeEach((to, from, next) => {
  // 进行权限判断或其他操作
  next()
})

上記のコードでは、グローバル ルート ガードは beforeEach 関数によって定義されています。to と from はそれぞれ次のルートと現在のルートを表し、next は関数を表しますルートジャンプ操作を実行するには、ガード内の次の関数を呼び出す必要があります。

4. 概要

このチュートリアルでは、VUE3 フレームワークにおけるルーティングとナビゲーションの基本概念と使用法、およびいくつかの高度な概念を紹介します。このチュートリアルを通じて、VUE3 のルーティングとナビゲーションの基本的な使い方をマスターし、実際のプロジェクトでルーティングとナビゲーションの機能を適用できるようになることを願っています。

以上がVUE3 基本チュートリアル: ルーティングとナビゲーションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。