VUE3 エントリの開発: Vue-Router を使用してページ ジャンプを実現する

Vue 3 は、インタラクティブなユーザー インターフェイスを構築するための最も人気のある JavaScript フレームワークの 1 つです。 Vue-Router は Vue フレームワークのプラグインで、シングルページ アプリケーションでルーティング管理を実装するために使用されます。この記事では、Vue-Routerを使用してVue 3でページジャンプを実装する方法を紹介します。

1. Vue-Router のインストールと設定

始める前に、Vue 3 がインストールされていることを確認してください。まだインストールされていない場合は、公式ドキュメント (https://v3.cn.vuejs.org/guide/installation.html) を参照してインストールできます。

Vue-Router のインストール:

ターミナルで次のコマンドを実行してインストールします:

npm install vue-router@4.0.0-alpha.13

Vue 3 では、Vue-Router のバージョンはそれ以上である必要があります。 4.0.0-α.13.

Vue-Router をインストールした後、Vue 3 アプリケーションで Vue-Router を設定する必要があります。 Routes.js ファイルを作成します:

import Home from '@/components/Home'
import About from '@/components/About'

export default [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

このファイルでは、2 つのルートを定義します。1 つはホームページ (ホーム)、もう 1 つは会社概要 (About) ページです。

また、Vue 3 アプリケーションのエントリ ファイル (main.js) に Vue-Router をインポートして設定する必要があります。

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

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

const app = createApp(App)

app.use(router)

app.mount('#app')

このファイルでは、ルーター インスタンスを作成し、 createWebHistory 関数を使用してルーターのスキーマを作成します。また、ルートをルーター インスタンスに渡します。

Vue 3 では、app.use() メソッドを使用して Vue-Router プラグインを Vue アプリケーションにインストールします。最後に、app.use() メソッドの後に app.mount() メソッドを配置すると、Vue-Router が正しくインストールされ、アプリケーションが正常に実行できるようになります。

2. ページ ジャンプの実装

Vue-Router のインストールと設定が完了したので、Vue-Router を使用してページ ジャンプを実装します。

1. App.vue ファイルにルーティング リンクを追加します:

<template>
  <div>
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view />
  </div>
</template>

このテンプレートでは、b988a8fd72e5e0e42afffd18f951b277 コンポーネントを使用してルーティング リンクを作成します。属性はルーティング パスです。

2. Home.vue と About.vue にコンテンツを追加する

Home ページと About ページ用に 2 つの Vue コンポーネントを作成しました。これらをテンプレートに追加する必要があります。これらのコンポーネントの一部のコンテンツを追加して、ページが正常にジャンプすることを確認します。

Home.vue:

<template>
  <div>
    <h2>Home</h2>
    <p>Welcome to the home page</p>
  </div>
</template>

About.vue:

<template>
  <div>
    <h2>About</h2>
    <p>Welcome to the about page</p>
  </div>
</template>

これで、ルーティング リンクとページ コンテンツが正常に設定されました。これらのリンクを使用してページにジャンプできます。

3. 概要

この記事では、Vue-Router を使用して Vue 3 でページ ジャンプを実装する方法を学びました。まず、Vue-Router をインストールして設定します。次に、b988a8fd72e5e0e42afffd18f951b277 コンポーネントを使用してルート リンクを作成します。最後に、コンポーネント テンプレートにコンテンツを追加して、ページが正常にジャンプするかどうかを確認します。

Vue-Router には、ダイナミック ルーティング、ネスト ルーティング、ルート ガードなど、他にも多くの機能があります。これらの機能をマスターすると、複雑な単一ページ アプリケーションを作成し、アプリケーション内でジャンプやナビゲーションを使用できるようになります。

以上がVUE3 エントリの開発: Vue-Router を使用してページ ジャンプを実現するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。