Apakah beberapa cara untuk menghantar nilai dalam penghalaan Vue?

Cara laluan Vue melepasi nilai: 1. Gunakan navigasi penghalaan "pautan penghala" untuk lulus; 2. Panggil "$router.push" untuk melaksanakan nilai parameter penghalaan; Laluan atribut, dan kemudian lulus nilai parameter mengikut params 4. Lulus nilai parameter melalui pertanyaan.

Persekitaran pengendalian tutorial ini: sistem Windows 7, vue versi 2.9.6, komputer DELL G3.

Kaedah penghalaan Vue untuk menghantar nilai parameter

1. Gunakan

Contohnya: 393060e6ec4dab8f1c1798bb307adc14d625018d6d57dc2163f3a71531b24864

Komponen anak:

this.$route.params.num menerima parameter yang diluluskan oleh komponen induk dccb39444cc9afb7c247dfbd5be957b3routerlink传参d625018d6d57dc2163f3a71531b24864

Konfigurasi penghalaan::

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

Paparan dalam bar alamat::{path: '/a/:num', name: A, component: A}

2. Panggil $router.push untuk melaksanakan pemindahan parameter laluanhttp://localhost:8080/#/a/123

Komponen induk: Ikat acara klik dan tulis kod lompat

Subkomponen: this.$route.params.id menerima parameter yang diluluskan oleh komponen induk

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

Konfigurasi laluan::

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

Paparan dalam bar alamat: : {path: '/d/:id', name: D, component: D}

3. Padankan laluan melalui nama dalam atribut penghalaan, dan kemudian lulus parameter mengikut param http://localhost:8080/#/d/123

Komponen induk: Padankan nama atribut yang dikonfigurasikan oleh laluan

Komponen anak:

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

Konfigurasi penghalaan: Tidak perlu menambah parameter masuk selepas laluan, tetapi nama mesti konsisten dengan nama dalam komponen induk

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

Paparan dalam bar alamat:
Dapat dilihat bahawa bar alamat {path: '/b', name: 'B', component: B} tidak akan membawa

dengan parameter masuk, dan selepas memuat semula halaman semula, Parameter

akan hilang
4 Lulus parameter melalui pertanyaan http://localhost:8080/#/b

Ibu bapa. komponen:

Subkomponen:

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

Konfigurasi laluan: Tiada pengubahsuaian diperlukan

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

Paparan dalam bar alamat :
(Cina transkod){path: '/c', name: 'C', component: C}

Syor berkaitan: "tutorial vue.js
"http://localhost:8080/#/c?sometext=这是小羊同学

Atas ialah kandungan terperinci Apakah beberapa cara untuk menghantar nilai dalam penghalaan Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!