lompat halaman vue js dengan parameter

Vue.js ialah rangka kerja JavaScript yang sangat popular yang membantu anda membina aplikasi web berskala. Salah satu ciri Vue.js yang paling berkuasa ialah sistem penghalaannya, yang membolehkan anda melaksanakan SPA (Aplikasi Halaman Tunggal) dengan mudah. Apabila membangunkan aplikasi web, pemindahan data antara halaman adalah penting, yang memerlukan pemindahan parameter antara halaman.

Artikel ini akan memperkenalkan cara melaksanakan penghantaran parameter halaman dalam Vue.js.

1. Tentukan parameter dalam laluan

Dalam Vue.js, anda boleh menggunakan pemalam Vue Router untuk pengurusan laluan. Apabila menentukan laluan, anda boleh menggunakan titik bertindih (:) untuk menunjukkan parameter yang akan dilalui. Sebagai contoh, takrifkan laluan bernama "produk" dan takrifkan parameter bernama "id" seperti berikut:

{
  path: '/product/:id',
  name: 'product',
  component: Product
}

Dalam contoh di atas, laluan laluan ialah "/product/:id ", di mana ": id" mewakili parameter. Dan, laluan ini akan menjadikan komponen Produk.

2. Dapatkan parameter dalam komponen

Setelah laluan dengan parameter ditentukan, langkah seterusnya ialah menghantar parameter kepada komponen yang sepadan. Dalam komponen, anda boleh menggunakan atribut $route untuk mendapatkan parameter yang diluluskan. Contohnya, dalam contoh di atas, jika anda ingin mendapatkan parameter dalam komponen Produk, anda boleh menggunakan kod berikut:

export default {
  name: 'Product',
  methods: {
    getProduct() {
      const id = this.$route.params.id;
      // 根据id获取产品数据
    }
  }
}

Dalam kod di atas, $route.params digunakan untuk mengakses parameter yang dilalui laluan, di mana "id" Adakah nama parameter ditakrifkan dalam laluan.

3. Gunakan pautan laluan untuk lulus parameter

Dalam Vue.js, anda boleh menggunakan pautan laluan untuk lulus parameter. Pautan penghalaan ialah komponen yang dicipta oleh Penghala Vue untuk memaparkan pautan, yang menyediakan fungsi penghalaan operasi yang fleksibel.

Sebagai contoh, dalam komponen bernama "ProductList", anda boleh menggunakan pautan laluan untuk memaut ke laluan "produk" dan lulus parameter bernama "id". Kodnya adalah seperti berikut:

<template>
  <div>
    <h2>Product List</h2>
    <ul>
      <li v-for="product in products" :key="product.id">
        <router-link :to="'/product/' + product.id">{{ product.name }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'ProductList',
  data() {
    return {
      products: [
        { id: 1, name: 'Product 1' },
        { id: 2, name: 'Product 2' },
        { id: 3, name: 'Product 3' }
      ]
    }
  }
}
</script>

Dalam komponen di atas, gunakan teg b988a8fd72e5e0e42afffd18f951b277 untuk membuat pautan penghalaan yang menghala ke laluan "/product/:id" dan gunakan ID dalam "product.id "untuk parameter.

4 Navigasi ke laluan dengan parameter secara pemprograman

Selain menggunakan pautan laluan untuk lulus parameter, anda juga boleh menavigasi ke laluan dengan parameter secara pemprograman. Dalam Vue.js, ini boleh dicapai menggunakan kaedah $router.push(). Sebagai contoh, dalam kejadian klik butang, anda boleh menulis kod berikut:

export default {
  name: 'ProductList',
  methods: {
    goToProduct(id) {
      this.$router.push({ name: 'product', params: { id: id } })
    }
  }
}

Dalam kod di atas, kaedah "goToProduct()" menggunakan kaedah $router.push() untuk menavigasi ke laluan bernama " product" dan Tetapkan parameter "id" kepada parameter lulus dalam.

Kesimpulan

Lulus parameter penghalaan adalah keperluan yang sangat biasa apabila menggunakan Vue.js untuk pembangunan aplikasi web. Dalam artikel ini, kami memperkenalkan cara menggunakan sistem penghalaan dalam Vue.js untuk menghantar parameter antara halaman. Mula-mula, kami menentukan parameter dalam laluan, dan kemudian dapatkan parameter ini dalam komponen. Kedua, kami memaut ke laluan dengan parameter melalui rantaian laluan dan secara pemrograman. Ini akan membantu anda membina aplikasi web yang lebih fleksibel yang menghantar data yang diperlukan antara halaman.

Atas ialah kandungan terperinci lompat halaman vue js dengan parameter. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!