Vueルーティングを通じてアドレスバーのパラメータを変更する方法

Vue は、開発者にとって便利な機能を多数提供する非常に人気のある JavaScript フレームワークです。このうち、Vue Router は Vue のサブモジュールであり、ビューとアドレス間のマッピング関係を管理します。 Vue ルーティングを使用すると、さまざまなビューをさまざまな URL アドレスに簡単にマッピングできます。この記事では、Vue ルーティングを通じてアドレスバーのパラメーターを変更する方法を紹介します。

1. Vue Router のインストール

まず、Vue Router をインストールする必要があります。ターミナルで、次のコマンドを入力してインストールします:

npm install vue-router --save

Yarn パッケージ マネージャーを使用している場合は、次のコマンドを使用してインストールできます:

yarn add vue-router

2. Vue ルーターの作成インスタンス

アプリケーションのエントリ ファイルで、Vue Router インスタンスを作成する必要があります。以下は基本的な例です。

import Vue from 'vue';
import Router from 'vue-router';
import HomePage from '@/components/HomePage.vue';
import AboutPage from '@/components/AboutPage.vue';

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomePage,
    },
    {
      path: '/about',
      name: 'about',
      component: AboutPage,
    },
  ],
});

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App },
});

上記のコードでは、2 つのルートを定義します。「/」は HomePage コンポーネントに対応し、「/about」は AboutPage コンポーネントに対応します。どちらのルートにも、コード内で参照できる名前があります。

3. アドレス バーのパラメーターを変更する

Vue Router では、ルーティング パス、パラメーター、名前などを含む現在のルーティング情報を $route オブジェクトを通じて取得できます。 。 $route オブジェクトを使用して、アドレス バーのパラメータを変更できます。以下に例を示します。

<script>
export default {
  methods: {
    changeParam() {
      this.$router.push({ name: 'about', params: { id: 1 } });
    },
  },
};
</script>

この例では、changeParam という名前のメソッドを定義し、$router.push メソッドを使用してアドレス バーのパラメータを変更します。このメソッドは、ルート名とパラメータを含むオブジェクトをパラメータとして受け取ります。この例では、ルート名を「about」、パラメータを {id: 1} に設定します。これは、「about」ルートにジャンプし、値が 1 の「id」というパラメータを渡すことを意味します。

4. アドレス バーのパラメーターの取得

アドレス バーのパラメーターを変更することに加えて、アドレス バーのパラメーターを取得することもできます。以下に例を示します。

<script>
export default {
  computed: {
    id() {
      return this.$route.params.id;
    },
  },
};
</script>

この例では、id という計算プロパティを定義します。この計算されたプロパティでは、$route.params.id を使用して、アドレス バーの「id」という名前のパラメーターを取得します。

これらの手順により、アドレス バーのパラメータを簡単に変更し、アドレス バーのパラメータを取得できます。このようにして、Vue アプリケーションでより高度なページ ジャンプとデータ転送を実装できます。

以上がVueルーティングを通じてアドレスバーのパラメータを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。