Vueのボタンを介して新しいページを渡す方法

Vue では、ルーティングを通じてページ間をジャンプできます。この記事では、Vue のボタンを使用して新しいページに移動する方法を説明します。 Vue の公式ルーター プラグインである Vue Router を使用します。

Vue Router は Vue.js の公式ルーターです。これにより、一部の URL を Vue コンポーネントにマップするルーティング テーブルをセットアップできるようになります。このようにして、URL を介してさまざまなページに移動できます。まずは Vue Router をインストールしましょう。

Vue Router のインストール

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

npm を使用する:

npm install vue-router

yarn を使用する:

yarn add vue-router

Vue プロジェクトで Vue Router を使用する

Vue Router をインストールした後、それを使用する必要があります。 Vue プロジェクトで Vue Router を使用するには、main.js に Vue Router を導入して使用する必要があります。

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

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    // ...
  ]
})

new Vue({
  router,
  // ...
}).$mount('#app')

上記のコードでは、まず main.js に Vue と Vue Router を導入しました。次に、Vue.use(VueRouter) を通じて Vue Router を使用するように Vue に指示します。次に、VueRouter インスタンスを作成し、いくつかのルーティング ルールをそれに渡します。最後に、この VueRouter インスタンスを Vue インスタンスのルーター オプションに渡します。このようにして、Vue Router がアプリケーションで動作できるようになります。

ルーティングの設定

Vue Router では、routes 属性を使用してルーティングを設定できます。

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})

上記のコードでは、routes 属性に 2 つのパス「/」と「/about」を設定しています。これらのパスにアクセスすると、Vue Router はパスに対応するコンポーネントをレンダリングします。

パラメータの受け渡し

Vue Router では、URL パラメータを通じてデータを渡すことができます。 URL にパラメータを追加すると、これらのパラメータが定義したコンポーネントに渡されます。

たとえば、id という名前のパラメータを渡したい場合は、次のようにルートを設定できます:

const router = new VueRouter({
  routes: [
    {
      path: '/users/:id',
      component: User
    }
  ]
})

このルートでは、「:id」を使用します。 ' パラメータを設定します。このパラメータはコンポーネント User に渡されます。

User コンポーネントでは、$route.params.id を通じてこのパラメータにアクセスできます。例:

<template>
  <div>
    User ID: {{ $route.params.id }}
  </div>
</template>

上記のコードでは、$route.params.id を使用して、渡したパラメーターにアクセスします。

Forward および Backward

Vue Router は、Forward および Backward 機能もサポートしています。 $router.go() メソッドを使用して、前方と後方を実現できます。例:

<template>
  <div>
    <button @click="$router.go(-1)">Back</button>
    <button @click="$router.go(1)">Foward</button>
  </div>
</template>

上記のコードでは、2 つのボタンを作成しました。 1 つは後退用、もう 1 つは前進用です。これらのボタンがクリックされると、$router.go() メソッドが呼び出され、数値パラメータが渡されます。この数値は、前進または後退するステップの数を表します。負の数は後退を意味し、正の数は前進を意味します。

概要

この記事では、Vue Router を使用してルートを設定し、パラメーターを渡し、前後に進む方法を学びました。これらのメソッドを使用すると、Vue プロジェクト内のページ間を簡単に移動できます。

以上がVueのボタンを介して新しいページを渡す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。