vue.jsでパラメータを指定してジャンプする方法

パラメータを使用した Vue.js ジャンプ メソッド: 1. ルートを定義します; 2. コンポーネントでルーティング パラメータを使用します; 3. パラメータを使用してジャンプを実行します。

Vue.js では、ルーティング パラメーターを使用して、異なるページ間でデータを渡すことができます。これは通常、ルートの動的フラグメント パラメータを通じて実現されます。 Vue.js でパラメータを使用してジャンプする方法の一般的な手順は次のとおりです:

1. ルートを定義します: 最初に、Vue のルーティング設定でパラメータを使用してルートを定義します。 jsアプリケーション。ルートを定義するとき、コロン (:) を使用して動的フラグメント パラメータを指定できます。このパラメータは、対応するページにジャンプするときに渡されます。例:

const routes = [
  {
    path: '/user/:id',
    component: User
  }
]

上の例では、「id」という名前のパラメータを使用して「user」という名前のルートを定義しました。これは、ユーザーが「/user/xxx」にアクセスすると、「xxx」が「id」パラメータとして対応するコンポーネントに渡されることを意味します。

2. コンポーネントでルーティング パラメータを使用する: パラメータを受け取るコンポーネントでは、`$route.params` を通じてルーティング パラメータにアクセスできます。たとえば、上記の例では、渡された「id」パラメータには、User コンポーネントの「$route.params.id」を通じてアクセスできます。

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

3. パラメーターを使用してジャンプ: パラメーターを使用してジャンプする必要がある場合は、vue-router が提供する `router-link` コンポーネントを使用するか、プログラムによるルーティングを実行できます。

Use ``:

<router-link :to="{ path: &#39;/user/&#39; + user.id }">用户详情</router-link>

上の例では、ユーザーが「ユーザーの詳細」リンクをクリックすると、「/user/xxx」にジャンプします。 page 。「xxx」は「user.id」の値です。

プログラムによるルーティング ナビゲーション:

methods: {
  goToUserDetail(userId) {
    this.$router.push({ path: '/user/' + userId });
  }
}

上の例では、`goToUserDetail` メソッドが呼び出されるときに、ルーティング ナビゲーションとパラメーターが渡されます。

上記は、Vue.js でパラメーターを使用してジャンプするための一般的な手順です。パラメーターを使用してルートを定義し、コンポーネント内のルート パラメーターにアクセスし、`` またはプログラムによるルート ナビゲーションを使用することにより、パラメーターを使用してジャンプする機能を Vue.js アプリケーションに実装できます。

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