Artikel ini akan menunjukkan cara membuat penghalaan dinamik dalam aplikasi NUXT melalui contoh e-dagang yang digunakan pada Netlify. Ini adalah senario biasa: anda mendapat data dari API, yang mungkin tidak diketahui, besar dalam bilangan atau perubahan pada bila -bila masa. Nasib baik, NUXT membuat proses membuat penghalaan dinamik sangat lancar.

Mari mulakan!

Repositori GitHub laman demo

Buat halaman

Dalam contoh ini, saya membuat beberapa data kedai maya menggunakan Mockaroo dan menyimpannya dalam folder statik. Biasanya anda akan menggunakan pengambilan atau axios dan tindakan di kedai VUEX untuk mengumpul data ini. Sama ada cara, kami menyimpan data di store/index.js dengan VUEX, yang mengandungi status UI dan array kereta kosong.

 Import data dari '~/static/storedata.json'

Eksport const state = () => ({
  Cartuistatus: 'Idle',
  disimpan: data,
  kereta: []
})

Harus diingat bahawa dalam NUXT, kita hanya perlu membuat fail .vue di direktori pages untuk menetapkan laluan. Oleh itu, kami mempunyai halaman index.vue sebagai halaman utama, halaman cart.vue sebagai keranjang belanja, dan lain -lain. Nuxt secara automatik akan menghasilkan semua laluan untuk kami untuk halaman ini.

Untuk membuat laluan dinamik, kami akan membuat direktori untuk menyimpan halaman ini. Dalam kes ini, saya membuat direktori yang dipanggil /products kerana laluan akan menunjuk kepada pandangan butiran setiap produk.

Dalam direktori ini saya akan membuat halaman dengan garis bawah, dan pengenal unik yang saya mahu gunakan untuk membuat laluan. Jika anda melihat data dalam kereta, nampaknya ini:

 [
  {
    "ID": "9D436E98-1DC9-4F21-9587-76D4C0255E33",
    "Warna": "Goldenrod",
    "Keterangan": "Mauris enim Leo, Rhoncus sed, Vestibulum Sit Amet, Cursus ID, Turpis. Integer Aliquet, Massa ID Lobortis Convallis, Tortor Risiko Dapibus Augue, Vel occumsan Tellus Nisi Eu Orci.
    "jantina": "lelaki",
    "Nama": "Desi Ada",
    "Kajian": "Produkisasi Pasaran Maya",
    "membintangi": 3,
    "Harga": 50.40,
    "IMG": "1.jpg"
  },
  …
]

Anda dapat melihat bahawa ID setiap entri adalah unik, jadi ini adalah pengenal calon yang baik, kami namakan halaman:

_id.vue

Sekarang kita boleh menggunakan parameter penghalaan untuk menyimpan ID halaman tertentu dalam data:

 data () {
  kembali {
    ID: Ini. $ route.params.id,
  }
},

Untuk entri di atas, jika kita melihat data di DevTools, ia akan menjadi:

 ID: "9D436E98-1DC9-4F21-9587-76D4C0255E33"

Kami kini boleh menggunakannya untuk mendapatkan semua maklumat lain mengenai entri ini dari penyimpanan. Saya akan menggunakan mapState :

 import {MapState} dari "Vuex";

dikira: {
  ... MapState (["storedata"]),
  produk () {
    kembali this.storedata.find (el => el.id === this.id);
  }
},

Kami menapis storedata untuk mencari penyertaan dengan ID yang unik!

Beritahu konfigurasi NUXT

Jika kita membina aplikasi menggunakan Biet Build, kita sudah selesai, tetapi kita menggunakan NUXT untuk membuat tapak statik untuk penempatan, dalam kes ini di Netlify. Apabila kami membuat tapak statik menggunakan NUXT, kami akan menggunakan perintah yarn generate . Kita mesti menggunakan perintah generate dalam nuxt.config.js untuk membiarkan NUXT mengetahui tentang fail dinamik.

Perintah ini akan mengharapkan fungsi yang akan mengembalikan janji yang dihuraikan ke dalam array seperti ini:

 Eksport Lalai {
  menjana: {
    Laluan: [
      '/produk/1',
      '/produk/2',
      '/produk/3'
    ]
  }
}

Untuk melakukan ini, kami akan memperkenalkan data dari direktori statik di bahagian atas fail dan membuat fungsi:

 Import data dari './static/storedata.json'
Biarkan DynamicRoutes = () => {
  Kembalikan janji baru (menyelesaikan => {
    menyelesaikan (data.map (el => `produk/$ {el.id}`))
  })
}

Kami kemudian akan memanggil fungsi dalam konfigurasi:

 menjana: {
  Laluan: Dynamicroutes
},

Jika anda menggunakan Axios untuk mengumpul data dari API (yang lebih biasa), ia kelihatan lebih seperti ini:

 Import Axios dari 'Axios'
Biarkan DynamicRoutes = () => {
  kembali axios.get ('https: // your-napi-here/products') .then (res => {
    kembali res.data.map (produk => `/produk/$ {product.id}`)
  })
}

Dengan cara ini, kami menyelesaikan persediaan penghalaan dinamik! Jika anda menutup dan memulakan semula pelayan, anda akan melihat penghalaan dinamik untuk setiap produk berkuatkuasa!

Untuk bahagian terakhir artikel ini, kami akan terus menerangkan bagaimana seluruh halaman dibuat dan bagaimana kami menambah projek ke kereta, kerana ini mungkin sesuatu yang anda ingin pelajari juga.

Isi halaman

Sekarang kita boleh mengisi halaman dengan sebarang format yang kita mahu, kerana kita boleh mengakses semua maklumat melalui product yang dikira:

<main><img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Membuat laluan dinamik dalam aplikasi NUXT"><h1> {{product.name}}</h1>
  <h4>{{Product.price | dolar}}</h4>
  <p>{{product.description}}</p>

 …
</main>

Dalam kes ini, kami juga ingin menambah item ke kereta dalam penyimpanan. Kami akan menambah keupayaan untuk menambah dan memadam item (sementara tidak membenarkan pengurangan nombor di bawah sifar)

<p>
  <button> 0 ? quantity-- : quantity = 0">-</button>
  {{Quantity}}
  <button> </button>
</p>
…
<button>Tambah ke kereta</button>

Dalam kaedah komponen ini, kami menambah item ditambah medan baru (kuantiti) ke array, yang kami lalui sebagai muatan ke mutasi di kedai.

 Kaedah: {
  cartadd () {
    biarkan item = this.product;
    item.quantity = this.quantity;
    this.tempcart.push (item);
    Ini. $ store.commit ("addTocart", item);
  }
}

Di Vuex Storage, kami akan menyemak sama ada projek itu sudah wujud. Jika ia wujud, kami hanya akan meningkatkan bilangannya. Jika ia tidak wujud, kami akan menambah keseluruhan item yang mengandungi kuantiti ke array kereta.

 addTocart: (state, muatan) => {
  Biarkan itemFound = palsu
  state.cart.Foreach (el => {
    jika (el.id === muatan.id) {
      el.Quantity = payload.quantity
      ItemFound = Benar
    }
  })
  jika (! itemfound) state.cart.push (muatan)
}

Kami kini boleh menggunakan getters dalam penyimpanan untuk mengira jumlahnya, yang akhirnya akan diserahkan kepada fungsi tanpa pelayan kami (jawatan lain tentang ini akan datang tidak lama lagi!). Kami akan menggunakan mengurangkan ini kerana mengurangkan sangat baik untuk mendapatkan nilai dari banyak nilai. (Saya menulis lebih banyak maklumat di sini tentang bagaimana mengurangkan kerja).

 carttotal: state => {
  jika (! state.cart.length) kembali 0
  kembali state.cart.reduce ((ac, next) => ac next.quantity * next.price, 0)
}

Repositori GitHub laman demo

Itu sahaja! Kami telah menubuhkan halaman produk individu dan NUXT menjana semua laluan individu untuk kami pada masa membina. Anda pasti ingin mencuba NUXT untuk diri sendiri. ?

Atas ialah kandungan terperinci Membuat Laluan Dinamik dalam Aplikasi NUXT. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!