VUE3 開発入門チュートリアル: Vue.js フロントエンド ルーティングの使用

Vue.js は、現在最も人気のある JavaScript フレームワークの 1 つであり、そのシンプルさ、使いやすさ、効率性、速度により、さまざまなフロントエンド プロジェクトで使用されています。特に VUE3 バージョンのリリース後は、その原理と設計がより明確になり、パフォーマンスも大幅に向上しました。最新のフロントエンド Web サイトまたはアプリケーションを迅速かつ簡単に開発する方法を探している場合は、Vue.js を学習してマスターする価値があります。この記事では、Vue.js フロントエンド ルーティングの使用方法に焦点を当てた、VUE3 開発の入門チュートリアルを紹介します。

Vue.js フロントエンド ルーティングの役割は何ですか?

単一ページ アプリケーションでは、ページの切り替えはフロントエンド ルーティングによって実現されます。フロントエンド ルーティングとは、Web アプリケーションで URL アドレスが変更されず、ページのコンテンツが JavaScript によって変更され、非同期読み込みと更新切り替えが行われないことを意味します。さまざまな URL をさまざまなコンポーネントまたはページ テンプレートに関連付け、完全なフロントエンド ルーティング システムを形成します。 Vue.js では、vue-router プラグインを通じてフロントエンド ルーティング機能を実装できます。

vue-router の紹介

vue-router は、Vue.js が公式に提供するルーティング プラグインで、シングルページ アプリケーションのフロントエンド ルーティング機能を実装するために使用されます。 Vue.js と緊密に統合されているため、Vue.js を使用したシングルページ アプリケーションの開発が簡単になります。さまざまなルーティング モードを提供し、動的ルーティング、ネスト ルーティング、名前付きルーティングなどの豊富な機能をサポートします。また、vue-router はルートの遅延読み込みもサポートしているため、アプリケーションのパフォーマンスが向上します。

vue-router のインストール

vue-router の使用を開始する前に、まず vue-router プラグインをインストールする必要があります。 npm コマンドを使用してインストールできます。

npm install vue-router

Vue.js のルーターを定義する

vue-router を使用する前に、ルーターを定義する必要があります。 Router は vue-router のコア コンポーネントの 1 つで、すべての URL リクエストをルーティングして照合し、一致したコンポーネントを指定された領域にレンダリングする役割を果たします。

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

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

const router = new VueRouter({
  routes
})

export default router

上記のコードでは、まず Vue と VueRouter を導入し、Vue.use() メソッドを通じて VueRouter を Vue にインストールします。次に、ホームページとバージョン情報ページにそれぞれ対応する 2 つのルーティング ルールが定義され、これらのルールはパス、名前、およびコンポーネント属性を通じて定義されます。最後に、これらのルールを新しい VueRouter インスタンスに渡し、ルーター オブジェクトをエクスポートします。

Vue.js フロントエンド ルーティングの使用

ルーターを定義した後、それを vue コンポーネントで使用する必要があります。 Vue コンポーネントを使用すると、ページ上のさまざまな領域をレンダリングでき、Vue.js の組み込みコンポーネントのルータービューを使用して、一致したコンポーネントを表示できます。

<template>
  <div class="wrapper">
    <h1 id="msg">{{ msg }}</h1>
    <ul>
      <li><router-link to="/">Home</router-link></li>
      <li><router-link to="/about">About</router-link></li>
    </ul>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      msg: 'Welcome to my VUE3 Web App!'
    }
  }
}
</script>

router-link は Vue.js の組み込みコンポーネントであり、リンクを生成し、リンクをルーターに関連付けるために使用されます。ユーザーがリンクをクリックすると、Router はリンクに一致する Vue コンポーネントを自動的にレンダリングします。

概要

この記事では、Vue.js フロントエンド ルーティングの使用方法に焦点を当てた、VUE3 開発の入門チュートリアルを紹介します。 Vue.js は、単一ページおよびモバイル アプリケーションの開発に特に適した優れた JavaScript フレームワークです。 Vue.js のルーティング モジュール vue-router には、ルーティング機能を簡単に開発できる優れた機能が数多くあります。この記事での紹介が、初心者が Vue.js のルーティング機能をよりよくマスターするのに役立つことを願っています。

以上がVUE3 開発入門チュートリアル: Vue.js フロントエンド ルーティングの使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。