Vue ルーティングにジャンプするいくつかの方法

Vue.js では、ルーティングは非常に重要な概念です。これにより、異なる URL アドレスに基づいて異なるコンテンツを表示できます。 Vue.js では、ルーティング アドレスを通じてさまざまなコンポーネントやページにアクセスできます。この記事では、Vue.js でジャンプをルーティングするいくつかの方法を紹介します。

1. router-link コンポーネントを使用してルーティング ジャンプを実装する

router-link は、Vue.js の組み込みルーティング ジャンプ コンポーネントです。さまざまなリンクにアクセスするための タグを提供し、URL アドレスをルータービュー コンポーネントに渡して、対応するページを表示します。テンプレート内の router-link コンポーネントを使用して、ページ間を移動できます。

次は、ルーターリンク コンポーネントを使用して他のページにジャンプするサンプル コードです。

<template>
  <div>
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于我们</router-link>
  </div>
</template>

上記のコードでは、2 つのルーターリンク コンポーネントを使用します。 to 属性は、ジャンプのルーティング アドレスを指定するために使用されます。たとえば、to="/about" は、About Us ページにジャンプすることを意味します。 タグをクリックすると、Vue.js はルーティング アドレスを照合し、to 属性の値に基づいて対応するコンポーネントを表示します。

2. Vue.js でプログラムによるナビゲーションを使用してルート ジャンプを実装する

ルート ジャンプにルーターリンク コンポーネントを使用することに加えて、Vue.js はルートを実行するためのプログラムによるナビゲーション メソッドも提供します。ジャンプ。プログラムによるナビゲーションは、JavaScript コードを介してルーティング ジャンプを実装するため、コード内の指定されたページに直接ジャンプできます。

次は、Vue.js でプログラム ナビゲーションを使用してルート ジャンプを実装するためのサンプル コードです。

<template>
  <div>
    <button @click="goHome">首页</button>
    <button @click="goAbout">关于我们</button>
  </div>
</template>

<script>
export default {
  methods: {
    goHome() {
      this.$router.push('/');
    },
    goAbout() {
      this.$router.push('/about');
    }
  }
}
</script>

上記のコードでは、2 つのボタンを使用してルート ジャンプを実装します。ボタンをクリックすると、 goHome または goAbout メソッドを呼び出してルート ジャンプを実装します。 Vue.js では、this.$router を通じてルーティング オブジェクトにアクセスし、push() メソッドを呼び出してルート ジャンプを実装できます。 Push() メソッドを呼び出してターゲットのルーティング アドレスを渡すと、Vue.js は自動的にルーティング アドレスを照合し、対応するコンポーネントを表示します。

3. router.push() メソッドを使用してルート ジャンプを実装する

$this.$router.push() メソッドを使用してルート ジャンプを実装することに加えて、Vue.js ではルーティング ジャンプを実行するための router.push() メソッドを提供します。 $this.$router.push() メソッドと比較して、router.push() メソッドはより直接的であり、ルーティング ジャンプ動作をより細かく制御できます。

次は、router.push() メソッドを使用してルート ジャンプを実装するサンプル コードです。

<template>
  <div>
    <button @click="goHome">首页</button>
    <button @click="goAbout">关于我们</button>
  </div>
</template>

<script>
import { Router } from 'vue-router';

export default {
  methods: {
    goHome() {
      this.$router.push('/');
    },
    goAbout() {
      const route = { path: '/about', name: 'About' };
      this.$router.push(route);
    }
  }
}
</script>

上記のコードでは、router.push() メソッドを使用してルート ジャンプを実装します。ジャンプ。文字列またはオブジェクトを渡して宛先ルーティング アドレスを指定できます。上の例では、ページのルーティング アドレスと名前を指定するオブジェクトを渡しました。