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 サイトの他の関連記事を参照してください。