Vue3+TS+Vite 開発スキル: ルーティング管理に Vue Router を使用する方法

Vue3 TS Vite 開発のヒント: ルーティング管理に Vue Router を使用する方法

近年、Vue フレームワークは、この分野の開発者の間でますます人気が高まっています。フロントエンド開発のこと。 Vue エコシステムでは、最新のルーティング管理ツールとして Vue Router を使用して、優れたユーザー エクスペリエンスを備えたシングルページ アプリケーションを構築できます。この記事では、ルーティング管理のために Vue Router と Vue3 および TypeScript を使用する開発スキルを共有します。

1. Vue Router のインストールと初期化

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

npm install vue-router@next

次に、Vue3 プロジェクトのエントリ ファイル (main.ts または main.js) に Vue Router を導入し、Vue アプリケーションに関連付ける必要があります。 。サンプル コードは次のとおりです。

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import Home from './views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
  // 其他路由配置
]

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

createApp(App)
  .use(router)
  .mount('#app')

上記のサンプル コードでは、まず createRouter 関数を使用して Vue Router インスタンスを作成し、ルーティング履歴モードとルーティング テーブルを構成しました。次に、createApp 関数によって Vue アプリケーションのインスタンスが作成され、作成された Vue Router インスタンスが use メソッドによって Vue アプリケーションに登録されます。

2. ルートとコンポーネントの定義

前のステップで、基本的なルーティング テーブルを設定しました。この例では、Home という名前のルートを追加し、それに対応するコンポーネントを Home コンポーネントに設定しただけです。次に、このコンポーネントを作成する必要があります。

src/views ディレクトリに Home.vue という名前のファイルを作成し、ファイルの内容を次のように編集します。

<template>
  <div>
    <h1>首页</h1>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: "Home"
})
</script>

<style scoped>
</style>

このサンプル コードでは、Vue の新機能を使用します。構成 API。 defineComponent 関数を使用してコンポーネントを定義し、このコンポーネントをエクスポートします。このコンポーネントでは、「ホーム」タイトルを含む div 要素を単純にレンダリングします。

3. ナビゲーションとルート ジャンプ

最初の 2 つのステップに基づいて、基本的な Vue Router アプリケーションを正常に作成できました。次に、Vue Router が提供するナビゲーションとルーティング ジャンプに関連するメソッドとテクニックをいくつか紹介します。

1. ナビゲーションに コンポーネントを使用する

Vue Router は、ルーティング ナビゲーション機能を実装するための便利なコンポーネント を提供します。テンプレートでは、 を使用し、to 属性を設定して、ジャンプする必要があるルーティング パスを指定するだけです。

サンプル コードは次のとおりです:

<template>
  <div>
    <h1>首页</h1>
    <router-link to="/about">关于我们</router-link>
  </div>
</template>

この例では、 コンポーネントを Home コンポーネントに追加しました。このコンポーネントをクリックすると、「/about」パスにジャンプします。

2. プログラムによるナビゲーションに router.push() メソッドを使用する

テンプレート内の コンポーネントをナビゲーションに使用することに加えて、Vue Router はプログラムによるナビゲーション ナビゲーション メソッドを提供します。コンポーネント スクリプトで router.push() メソッドを使用して、ルーティング ジャンプを実行できます。

サンプル コードは次のとおりです:

import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'

export default defineComponent({
  name: "Home",
  methods: {
    goToAbout() {
      const router = useRouter()
      router.push('/about')
    }
  }
})

この例では、goToAbout メソッドを定義し、メソッド内で useRouter 関数を使用して現在の Vue Router インスタンスを取得し、router.push を渡します。 ('/about') でルートジャンプを実行します。

4. 動的ルーティングとルーティング パラメーター

Vue Router は、動的ルーティングとルーティング パラメーターもサポートしています。ルーティング パスにプレースホルダーを構成することで、動的パラメータを含むルーティング パスを作成し、$route.params オブジェクトを通じてルーティング パラメータの値を取得できます。

サンプル コードは次のとおりです。

const routes = [
  {
    path: '/user/:id',
    name: 'User',
    component: User
  }
  // 其他路由配置
]

const User = defineComponent({
  name: "User",
  props: {
    id: {
      type: Number,
      required: true
    }
  },
  created() {
    console.log(this.id) // 输出路由参数id的值
  }
})

上記の例では、動的パラメーターを含むルーティング パス /user/:id を定義し、ルーティングの値を受信して​​検証します。 props 属性を介してパラメータを取得します。作成した User コンポーネントのライフサイクルフック関数では、console.log(this.id) を通じてルーティングパラメータ ID の値を出力できます。

5. ルーティング ガード

実際のプロジェクトでは、ルーティング ジャンプの前に、ユーザー ログインの検証やページの権限制御など、追加のロジック処理を実行する必要があることがよくあります。 Vue Router は、これらのニーズを満たすルート ガードを提供します。

Vue Router で一般的に使用される 3 つのルーティング ガードは、beforeEach、beforeEnter、beforeLeave です。これらは、ルートがジャンプする前、特定のルートに入る前、特定のルートから出る前にそれぞれトリガーされます。

サンプル コードは次のとおりです。

router.beforeEach((to, from, next) => {
  // 逻辑处理
  next()
})

router.beforeEnter((to, from, next) => {
  // 逻辑处理
  next()
})

router.beforeLeave((to, from, next) => {
  // 逻辑处理
  next()
})

上の例では、ルーター オブジェクトの対応するメソッドを通じてグローバル ルーティング ガードを登録し、コールバック関数で追加のロジック処理を実行します。ロジックを処理した後、next() メソッドを呼び出してルーティング ジャンプを続行します。

6. 概要

Vue Router は Vue エコシステムの重要な部分であり、Vue3 TS Vite 開発環境でのそのアプリケーションはよりシンプルかつ柔軟になりました。この記事では、Vue Router のインストールと初期化、ルートとコンポーネントの定義、ナビゲーションとルート ジャンプ、動的ルートとルート パラメーター、ルート ガードなど、ルート管理に Vue Router を使用する方法に関する重要なヒントをいくつか紹介します。

これらのスキルを習得することで、Vue Router をより適切に使用して優れたユーザー エクスペリエンスを備えたシングルページ アプリケーションを構築し、フロントエンド開発でより大きな役割を果たすことができます。この記事が、Vue3 TS Vite プロジェクトでルーティング管理に Vue Router を使用する読者に何らかの助けとガイダンスを提供できれば幸いです。

以上がVue3+TS+Vite 開発スキル: ルーティング管理に Vue Router を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。