パラメータを使用したvue jsページジャンプ

Vue.js は、スケーラブルな Web アプリケーションの構築に役立つ非常に人気のある JavaScript フレームワークです。 Vue.js の最も強力な機能の 1 つは、SPA (シングル ページ アプリケーション) を簡単に実装できるルーティング システムです。 Web アプリケーションを開発する場合、ページ間のデータ転送は非常に重要であり、ページ間のパラメータ転送が必要になります。

この記事では、Vue.js でページパラメータの受け渡しを実装する方法を紹介します。

1. ルーティングでパラメーターを定義する

Vue.js では、ルーティング管理に Vue Router プラグインを使用できます。ルートを定義するときは、コロン (:) を使用して、渡されるパラメーターを指定できます。たとえば、「product」という名前のルートを定義し、次のように「id」という名前のパラメータを定義します。

{
  path: '/product/:id',
  name: 'product',
  component: Product
}

上の例では、ルートのパスは「/product/:id」です。ここで、「:」 id」はパラメータを表します。そして、このパスは Product コンポーネントをレンダリングします。

2. コンポーネントでパラメーターを取得する

パラメーターを含むルートが定義されたら、次のステップはパラメーターを対応するコンポーネントに渡すことです。コンポーネントでは、$route 属性を使用して、渡されたパラメーターを取得できます。たとえば、上記の例で、Product コンポーネントのパラメーターを取得する場合は、次のコードを使用できます。

export default {
  name: 'Product',
  methods: {
    getProduct() {
      const id = this.$route.params.id;
      // 根据id获取产品数据
    }
  }
}

上記のコードでは、$route.params は次のとおりです。ルート パラメーターによって渡されたパラメーターにアクセスするために使用されます。ここで、「id」はルートで定義されたパラメーター名です。

3. ルーティング リンクを使用してパラメータを渡す

Vue.js では、ルーティング リンクを使用してパラメータを渡すことができます。ルーティング リンクは、リンクをレンダリングするために Vue Router によって作成されるコンポーネントであり、柔軟な操作ルーティング機能を提供します。

たとえば、「ProductList」という名前のコンポーネントでは、ルート リンクを使用して「product」ルートにリンクし、「id」という名前のパラメータを渡すことができます。コードは次のとおりです。

<template>
  <div>
    <h2>Product List</h2>
    <ul>
      <li v-for="product in products" :key="product.id">
        <router-link :to="'/product/' + product.id">{{ product.name }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'ProductList',
  data() {
    return {
      products: [
        { id: 1, name: 'Product 1' },
        { id: 2, name: 'Product 2' },
        { id: 3, name: 'Product 3' }
      ]
    }
  }
}
</script>

上記のコンポーネントで、<router-link> タグを使用して、「/product/:id」ルートを指すルーティング リンクを作成します。 「product.id の ID」をパラメータに使用します。

4. パラメーターを使用してプログラムでルートに移動する

ルート リンクを使用してパラメーターを渡すだけでなく、パラメーターを使用してプログラムでルートに移動することもできます。 Vue.js では、$router.push() メソッドを使用できます。たとえば、ボタンのクリック イベントでは、次のコードを記述できます。

export default {
  name: 'ProductList',
  methods: {
    goToProduct(id) {
      this.$router.push({ name: 'product', params: { id: id } })
    }
  }
}

上記のコードでは、「goToProduct()」メソッドは $router.push()## を使用します。 # 「product」という名前のルートに移動し、「id」パラメータを渡されたパラメータに設定するメソッド。

以上がパラメータを使用したvue jsページジャンプの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。