Vue プロジェクトでルーティングを使用してページ間を切り替え、パラメーターを転送するにはどうすればよいですか?

Vue プロジェクトでルーティングを使用してページ間を切り替え、パラメーターを転送するにはどうすればよいですか?

Vue プロジェクトでは、Vue Router を使用してページを切り替え、パラメーターを渡すことができます。 Vue Router はルーティング機能を実装するための公式推奨プラグインで、シングルページ アプリケーションでページ切り替えを簡単に実装でき、パラメーターの受け渡しをサポートします。

まず、Vue プロジェクトに Vue Router プラグインをインストールする必要があります。 npm コマンドを使用してインストールできます:

npm install vue-router

インストール後、プロジェクトのエントリ ファイル (通常は main.js) に Vue Router を導入し、ルーティング インスタンスを作成します:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(VueRouter)

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

const router = new VueRouter({
  routes
})

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

上記のコードではでは、import ステートメントを通じて VueRouter を導入し、プラグインを Vue インスタンスに登録します。次に、2 つのルーティング パスと対応するコンポーネントを含むルーティング構成オブジェクト ルートを定義しました。ルート パス「/」にアクセスすると、Home コンポーネントが表示され、「/about」にアクセスすると、About コンポーネントが表示されます。最後に、VueRouter をインスタンス化し、ルーティング構成オブジェクトを渡すことによって、ルーティング インスタンスを作成します。

ルーティング インスタンスを作成した後、Vue コンポーネントの b988a8fd72e5e0e42afffd18f951b277 と 975b587bf85a482ea10b0a28848e78a4 を使用してページ間を切り替えることができます。

b988a8fd72e5e0e42afffd18f951b277 は Vue Router によって提供されるコンポーネントで、リンクの生成に使用されます。自動的にタグにレンダリングされます。リンクをクリックすると、ルーティング ジャンプがトリガーされます。コンポーネントのテンプレートで b988a8fd72e5e0e42afffd18f951b277 を使用すると、ページ間を切り替えることができます。たとえば、Home コンポーネントのテンプレートでは、次のように b988a8fd72e5e0e42afffd18f951b277 を使用できます:

<template>
  <div>
    <h1>Home</h1>
    <router-link to="/about">Go to About</router-link>
  </div>
</template>

上記のコードでは、[Go to About] リンクをクリックすると、次のリンクにジャンプします。 /about パス。

975b587bf85a482ea10b0a28848e78a4 は Vue Router によって提供されるコンポーネントで、現在のルートに対応するコンポーネントをレンダリングするために使用されます。 Vue コンポーネントのテンプレートで 975b587bf85a482ea10b0a28848e78a4 を使用すると、現在のルートに対応するコンポーネントを表示できます。たとえば、App コンポーネントのテンプレートでは、次のように 975b587bf85a482ea10b0a28848e78a4 を使用できます:

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

このようにして、「/」または「/about」パスにアクセスすると、ホームコンポーネントと About コンポーネントがそれぞれレンダリングされます。

Vue Router は、ページ間の切り替えに加えて、パラメーターの受け渡しもサポートしています。ルーティング パスを定義するときは、パス内のプレースホルダーを使用してパラメーターを指定できます。たとえば、パラメータを含むルーティング パスを定義できます。

{
  path: '/user/:id',
  name: 'user',
  component: User
}

上記のコードでは、/user/:id のルーティング パスを定義します。ここで、:id はパラメータです。 /user/123 にアクセスすると、:id は実際の値に置き換えられます。たとえば、:id は 123 に置き換えられます。

Vue コンポーネントでは、this.$route.params を通じてルーティング パラメーターを取得できます。たとえば、User コンポーネントでは、次のようにルーティング パラメータを取得できます。

export default {
  mounted() {
    console.log(this.$route.params.id) // 输出路由参数的值
  }
}

上記のコードは、User コンポーネントがロードされた後にルーティング パラメータの値を出力します。

要約すると、Vue Router プラグインを使用すると、Vue プロジェクト内のページ間を簡単に切り替えてパラメータを転送できます。ページ切り替えは b988a8fd72e5e0e42afffd18f951b277 および 975b587bf85a482ea10b0a28848e78a4 を通じて実装され、パラメータはルーティング パスを定義することによって渡されます。 Vue Router を使用すると、プロジェクトの保守性と拡張性が向上し、ページ切り替えやパラメーター転送がより柔軟で便利になります。

以上がVue プロジェクトでルーティングを使用してページ間を切り替え、パラメーターを転送するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。