Bagaimana untuk menghantar nilai dalam laluan rangka kerja vuejs

Kaedah pemindahan nilai penghalaan rangka kerja Vuejs: 1. Panggil terus pernyataan "$router.push(...)" untuk membawa parameter bagi pemindahan nilai lompatan 2. Gunakan axios untuk memindahkan nilai, anda boleh memanggil "; pernyataan .$axios.get(...)" ini untuk lulus nilai.

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

Ringkaskan pemindahan nilai penghalaan dalam Vue, yang melibatkan penggunaan aksios

Mudah untuk mengelirukan kaedah ini apabila menggunakannya

A

komponen melepasi nilai

dan konfigurasi penghalaan yang sepadan:

{
	 path: '/detail/:id',
	 name: 'Detail',
	 component: Detail
}

Nota: Pastikan anda menambah /:id selepas laluan, id hanyalah parameter Nama tidak mengapa, tetapi ia perlu konsisten dengan nama parameter semasa menghantar dan menerima

Panggil terus $router.push untuk melaksanakan lompatan dengan parameter

this.$router.push({ path:`/detail/${id}` })

Nota: dalam Apabila melompat untuk memindahkan parameter, path diikuti oleh dua tanda belakang dan bukannya petikan berganda atau petikan tunggal, dan parameter yang diperlukan diluluskan dalam bentuk ${}

Terima dalam anak komponen

this.$route.params.id

Nota: Ia adalah route, bukan router

jika menggunakan atribut penghalaan nameUntuk menentukan laluan padanan untuk melepasi parameter, anda perlu melakukan ini:

Konfigurasi laluan yang sepadan:

{
    path: '/detail',
    name: 'Detail',
    component: Detail
}

Lompat dengan parameter:

this.$router.push({
  name: 'Detail',
  params: {
	id: id
  }
})

Nota: Anda tidak boleh gunakan /:id untuk menghantar parameter di sini, kerana komponen induk telah menggunakan params untuk membawa parameter. Terima parameter dalam

subkomponen:

this.$route.params.id

Sekali lagi, ia adalah route, bukan router

Gunakan params untuk lulus parameter, dan gunakan atribut name untuk sepadan dengan laluan lompatan Sama seperti penyerahan post, parameter tidak akan muncul dalam laluan lompat.

nilai lulus aksios

Apabila kita perlu membawa data bahagian hadapan ke antara muka bahagian belakang
Kita juga boleh menghantar nilai dalam dengan cara ini

Contohnya:

Kod untuk memanggil antara muka hujung belakang di hujung hadapan:

this.$axios.get(`http://127.0.0.1:3000/api/user/find/${id}`)

Terima di hujung belakang:

router.get('/find/:id',(req,res)=>{
	//接收let id = req.params.id
})

Ambil perhatian bahawa ia adalah permintaan dapatkan

Kaedah permintaan ini akan dipaparkan dalam bar alamat
Contoh pautan bar alamat: http://127.0. 0.1:3000/api/user/ find/10

Kaedah 2

Nilai lulus komponen

Konfigurasi penghalaan yang sepadan:

{
	 path: '/detail',
	 name: 'Detail',
	 component: Detail
}

Lompat dengan parameter:

this.$router.push({
	path:'/detail',
	query:{
		id:id
	}
})

Nota: Apa yang digunakan di sini ialah query

dan kemudian diterima dalam sub-komponen:

this.$route.query.id

Nota: Nama parameter mesti konsisten semasa menerima, jangan gunakan params untuk menerima query untuk menghantar parameter Gunakan < Atribut 🎜> sepadan dengan laluan lompat, serupa dengan penyerahan dan parameter dipaparkan dalam laluan.

nilai lulus aksiosquerypathJika anda mahu menggunakannya dalam aksios, anda boleh melakukan ini: getContohnya:

Malah, ini sama seperti menulis satu lagi

Nota: Ia dibalut dengan dua tanda belakang , diikuti dengan tanda ? dan bukannya /

this.$axios.get(`http://127.0.0.1:3000/api/user/delete?name=${name}&age=${age}`)

queryMenggunakan kaedah ini, anda boleh menghantar berbilang nilai dalam bar alamat sekaligus, dan menggunakan ampersand untuk menyambungkannya, iaitu

get di bahagian belakang Untuk menerima:

Nota: Jangan tambah apa-apa selepas

di sini apabila menerima, gunakan

router.get('/delete'(req,res)=>{
let name = req.query.name;
let age = req.query.age;
})

Menggunakan kaedah ini untuk menghantar nilai juga akan dipaparkan dalam bar alamatContoh pautan bar alamat: http://127.0.0.1:3000/api/user/delete?name =zhangsan&age=10/deletequeryPeringatan khas

Jika anda menggunakan
untuk lulus parameter, anda mesti menggunakan atribut

untuk sepadan dengan laluan lompatan

Jika anda menggunakan

untuk sepadan dengan laluan lompat
• paramsnameKaedah tiga
• Di sini kami hanya bercakap tentang nilai lulus axiosquerypathnilai lulus axios

< . keluar daripada data

dan diterima di bahagian belakang:

Nota: Apabila menerima di sini, gunakan

meminta

this.$axios.get(`http://127.0.0.1:3000/api/user/add`,{name=this.name,age=this.age`})

Secara amnya apabila kami ingin menghantar data ke pelayan, kami menggunakan permintaan post Kaedah permintaan ini selamat Jika anda menggunakan kaedah ini, data tidak akan dipaparkan dalam bar alamat.

Cadangan berkaitan: "tutorial vue.js"

Atas ialah kandungan terperinci Bagaimana untuk menghantar nilai dalam laluan rangka kerja vuejs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!