Vueでルーティングを行う方法

Vue.js は、単一ページの Web アプリケーションを構築するための人気のあるフロントエンド フレームワークです。 Vue は多くの便利なツールとプラグインを提供しており、アプリケーションのルーティングを管理するための Vue Router もその 1 つです。この記事では、Vue Router を使用して基本的なルーティング システムを作成する方法を紹介します。

1. Vue Router のインストール

Vue Router を使用するには、まず Vue Router をインストールする必要があります。 npm または Yarn を使用してインストールできます。

npm を使用する:

npm install vue-router 

yarn を使用する:

yarn add vue-router 

インストールが完了したら、Vue Router を導入する必要があります。

import VueRouter from 'vue-router';

2. Vue Router インスタンスの作成

Vue Router をインストールした後、Vue Router をインスタンス化してルートを定義する Vue Router インスタンスを作成する必要があります。 Vue.js では、通常、コンポーネントは Vue インスタンスを使用して作成および管理されます。 Vue Router インスタンスを作成する前に、必ず最初に Vue インスタンスを作成してください。

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

Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    // 路由信息定义
  ]
});

上記のコードでは、ルーター インスタンスを作成し、routes オプションで Web サイトのルーティング情報を定義します。 Vue Router では、ルーティング情報は一連のルーティング オブジェクトで構成されます。各ルート オブジェクトは、ルート パスとルートに対応するページ コンポーネントを定義します。

3. ルーティング テーブルの作成

ルーター インスタンスで定義されたルート属性は、アプリケーション全体のルーティング情報を保存するために使用されます。この属性では、URL パスと対応するビュー コンポーネントを指定するルーティング ルールを定義します。

import HomePage from '@/components/HomePage.vue';
import AboutPage from '@/components/AboutPage.vue';

const routes = [
  {
    path: '/',
    component: HomePage
  },
  {
    path: '/about',
    component: AboutPage
  }
];

上記のコードでは、/ と /about という 2 つのルーティング ルールを定義し、それぞれ HomePage コンポーネントと AboutPage コンポーネントにマップします。

4. ルーティング テーブルの登録

Vue Router のインスタンス化メソッドを呼び出すことで、ルーティング テーブルを Vue アプリケーションに登録できます。これは、Vue Router インスタンスで Vue.use() メソッドを呼び出すことで実現できます。

Vue.use(VueRouter);

const router = new VueRouter({
  routes,
  mode: 'history'
});

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

上記のコードでは、Vue インスタンスに Vue Router を登録し、インスタンス化します。次に、Vue Router インスタンスをルート Vue インスタンスに渡します。

5. ルーティング リンクの作成

Vue Router では、ルーティング リンク (router-link) コンポーネントを使用してページ ナビゲーションを実装できます。 router-link コンポーネントは実際にタグを生成し、ルーティング情報を自動的にバインドします。

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

上記のコードでは、2 つのルーターリンク コンポーネントを使用して、ホームページと概要ページに移動します。 router-link タグは、リンクする必要がある要素内でラップする必要があります。

6. ルーティング ビューの作成

Vue Router は、現在のルートに基づいてビューをレンダリングするための router-view と呼ばれるコンポーネントを提供します。

<router-view/>

上記のコードでは、router-view タグを使用して、現在の URL の一致するコンポーネントを適切な場所に表示します。

7. ルート イベントの処理

Vue Router では、ルート ナビゲーションがトリガーされたときにイベントを処理できます。これは、Vue Router インスタンスでイベントをリッスンすることで実行できます。

const router = new VueRouter({
  routes
});

router.beforeEach((to, from, next) => {
  // 在路由开始跳转前，进行路由守卫
});

router.afterEach(() => {
  // 跳转完成后
});

上記のコードでは、beforeEach() メソッドと afterEach() メソッドを使用してルーティング イベントをリッスンします。 beforeEach() メソッドでは、ユーザーのログイン要求やユーザー権限の確認などのルーティング ガードを実行できます。 afterEach() メソッドでは、ページジャンプ後の操作を実行できます。

概要

この記事では、Vue Router を使用して Vue.js アプリケーションでルートを作成する方法について説明します。 Vue Router をインストールして Vue Router インスタンスを作成し、ルーティング テーブルを定義しました。また、Vue.js アプリケーションでルート リンクとルート ビューを作成する方法、およびルート イベントを処理する方法についても説明しました。 Vue Router を使用すると、完全な単一ページの Web アプリケーションを簡単に構築できます。

以上がVueでルーティングを行う方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。