vueで同じページにジャンプしてパラメータを切り替える方法

Vue.js は、ユーザー インターフェイスを構築するための JavaScript フレームワークであり、MVVM モデルを採用し、データ駆動型の方法で DOM とデータをバインドします。アプリケーション開発プロセスにおいて、フロントエンド ルーティングは非常に重要な部分です。 Vue.js は、フロントエンドのルーティング機能を実装するために使用できる vue-router プラグインを提供します。

実際のビジネスでは、ユーザーが商品詳細ページを閲覧している際に、同じページ内の別の商品に切り替えるなど、同じページにジャンプしてパラメータを切り替える必要がある場面に遭遇することがよくあります。現時点では、vue-router の「動的ルーティング マッチング」機能と「遅延読み込み」機能を使用してこれを実現できます。

1. 動的ルート マッチング

Vue.js のルーティング システムでは、パラメータを含む URL を定義し、ルートが一致したときにコンポーネントにパラメータを挿入できます。これが動的ルート マッチングです。

まず、router.js で動的ルーティングを定義します。

{
    path: '/goods/:id',
    name: 'Goods',
    component: () => import('@/views/Goods.vue')
}

上記のコードでは、「Goods」という名前のルートを定義し、パスは「/goods/: id」です。このうち「:id」は動的パラメータであることを意味しており、ユーザーはアクセス時に任意のパラメータ値を渡すことができます。

次に、Goods.vue コンポーネントの $route を介してルーティング パラメーターを取得します。

<template>
  <div>
    <h1>商品详情页面</h1>
    <p>商品ID：{{ $route.params.id }}</p>
    <button @click="changeGoods">切换商品</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeGoods() {
        let goodsId = parseInt(this.$route.params.id) + 1
        this.$router.push({ name: 'Goods', params: { id: goodsId } })
    }
  }
}
</script>

上記のコードでは、$route.params を介してルーティング パラメーターを取得し、選択時を切り替えます。 Goods の場合は、現在のパラメータ値に 1 を加え、$router.push メソッドを通じて「Goods」という名前のルートにジャンプし、そこにパラメータを渡します。これにより、同じページ上で異なる商品を切り替える機能が有効になります。

2. 遅延読み込み

遅延読み込みは、遅延読み込みとして理解でき、必要な場合にのみ対応するコードを読み込むことを意味します。遅延読み込みを使用すると、ページの読み込み速度と全体的なパフォーマンスが向上します。

Vue.js では、import() 関数を使用して遅延読み込みを実装できます。遅延読み込みを使用するように、router.js 内のコンポーネントへの参照を変更します。

{
    path: '/goods/:id',
    name: 'Goods',
    component: () => import('@/views/Goods.vue')
}

ここでの import('@/views/Goods.vue') は、遅延読み込みを通じて Goods.vue コンポーネントを導入することです。ユーザーがこのルートにアクセスすると、対応するコードがロードされます。

3. 完全なコード

最後に、完全なコードを見てみましょう:

router.js

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/goods/:id',
      name: 'Goods',
      component: () => import('@/views/Goods.vue')
    }
  ]
})

Goods.vue

<template>
  <div>
    <h1>商品详情页面</h1>
    <p>商品ID：{{ $route.params.id }}</p>
    <button @click="changeGoods">切换商品</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeGoods() {
        let goodsId = parseInt(this.$route.params.id) + 1
        this.$router.push({ name: 'Goods', params: { id: goodsId } })
    }
  }
}
</script>

上記のコードでは、動的ルートマッチングと遅延読み込み技術を利用して、同じページ上で異なる商品を切り替える機能を実現しています。これは、Vue.js のルーティング システムの応用シナリオであり、Vue.js を学習し始めたばかりの学生にとっては、学習してマスターする価値があります。

以上がvueで同じページにジャンプしてパラメータを切り替える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。