Vue ルーティングで値を渡す方法はいくつかありますか?

Vue ルーティングの値の受け渡し方法: 1. "router-link" ルーティング ナビゲーションを使用して渡す; 2. "$router.push" を呼び出してルーティング パラメーター値を実現する; 3. ルーティング属性の名前を一致させるルーティングし、params に従ってパラメータ値を渡します。 4. クエリを通じてパラメータ値を渡します。

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

パラメータ値を渡す Vue ルーティング方法

1. ルーターリンクルーティング ナビゲーション

親コンポーネント: <router-link を = "/jump path/incomingparameters"></router-link>

例: < router-link を使用します。 link to="/a/123">routerlink 転送パラメータ</router-link>

Subcomponent: this.$route.params.num は、ルータによって渡されたパラメータを受け取ります。親コンポーネント

#

mounted () {
  this.num = this.$route.params.num
}

ルーティング構成::{パス: '/a/:num'、名前: A、コンポーネント: A}

アドレスバーに表示::http://localhost:8080/#/a/123

## 2. $router.push を呼び出します。ルートパラメータの受け渡しを実装するには

親コンポーネント: クリックイベントをバインドし、ジャンプコードを記述します

<button @click="deliverParams(123)">push传参</button>
  methods: {
    deliverParams (id) {
      this.$router.push({
        path: `/d/${id}`
      })
    }
  }

子コンポーネント: this .$route.params.id は、親コンポーネント

mounted () {
  this.id = this.$route.params.id
}

ルート構成:：{パス: '/d/:id' 、名前: D, によって渡されたパラメーターを受け取ります。コンポーネント: D}

アドレスバーに表示::http://localhost:8080/#/d/123

3. ルーティング属性の名前でルートを照合し、params に従ってパラメーターを渡します。

#親コンポーネント:

照合ルーティング設定された属性名

<button @click="deliverByName()">params传参</button>
    deliverByName () {
      this.$router.push({
        name: &#39;B&#39;,
        params: {
          sometext: &#39;一只羊出没&#39;
        }
      })
    }

サブコンポーネント:

<template>
  <div id="b">
    This is page B!
    <p>传入参数：{{this.$route.params.sometext}}</p>
  </div>
</template>

ルーティング設定:

パスの後に受信パラメータを追加する必要はありませんが、名前は親コンポーネントの名前と一致している必要があります{パス: '/b', 名前: 'B', コンポーネント: B}

アドレスに表示bar :

アドレス バー には受信パラメータが含まれず、ページを再度更新すると パラメータが失われることがわかります http ://localhost: 8080/#/b

4. クエリを通じてパラメータを渡す

親コンポーネント:

<button @click="deliverQuery()">query传参</button>
    deliverQuery () {
      this.$router.push({
        path: &#39;/c&#39;,
        query: {
          sometext: &#39;这是小羊同学&#39;
        }
      })
    }

サブコンポーネント:

<template>
  <div id="C">
    This is page C!
    <p>这是父组件传入的数据: {{this.$route.query.sometext}}</p>
  </div>
</template>

ルーティング構成: 変更は必要ありません

{パス: '/c',名前: 'C'、コンポーネント: C}
アドレスバーに表示:

(中国語にトランスコード)

http://localhost:8080/ # /c?sometext=これは暁陽のクラスメートです
関連する推奨事項: "vue.js チュートリアル

"

以上がVue ルーティングで値を渡す方法はいくつかありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。