在 Vue.js 中，我們經(jīng)常使用http請(qǐng)求來(lái)獲取或訪問(wèn)數(shù)據(jù)，如何傳遞參數(shù)是很重要的一個(gè)問(wèn)題。接下來(lái)，我們就來(lái)探究一下Vue中http傳遞參數(shù)的相關(guān)知識(shí)。

Vue 提供了一個(gè)內(nèi)置的方法，叫做ajax。通過(guò)ajax我們就可以進(jìn)行異步數(shù)據(jù)交互。Vue 實(shí)例通過(guò)局部擴(kuò)展 mixin 來(lái)與普通 Vue 組件融合為一個(gè)整體。可以像普通組件一樣引用父組件的數(shù)據(jù)和方法。

Vue.mixin({
methods: {
// 異步請(qǐng)求
$http: function(options) {
const self = this;
return new Promise(function(resolve, reject) {
axios(options).then(function(response) {
if(response.data.errcode === 0) {
resolve(response.data.data);
} else {
self.$message(response.data.errmsg);
reject(response.data.errmsg);
}
}).catch(function(error) {
self.$message('服務(wù)器開(kāi)小差了，請(qǐng)稍后再試');
reject(error);
});
});
}
}
});

在上面的代碼中，我們通過(guò)Vue.mixin擴(kuò)展了一個(gè)名為'$http'的方法，通過(guò)傳遞options對(duì)象來(lái)請(qǐng)求數(shù)據(jù)。

下面看一下具體的請(qǐng)求方式，通常情況下我們可以通過(guò)params、data、headers等屬性來(lái)傳遞參數(shù)。

params是get請(qǐng)求中攜帶參數(shù)的方式，將參數(shù)加在url后，之間用?連接，多個(gè)參數(shù)之間用&進(jìn)行拼接。如:

this.$http({
method: 'get',
url: '/api/getuser',
params: {
name: 'test',
age: 18
}
})

data是post請(qǐng)求中傳遞參數(shù)的方式：

this.$http({
method: 'post',
url: '/api/login',
data: {
name: 'test',
password: '123456'
}
})

headers用于設(shè)置請(qǐng)求的頭部信息：

this.$http({
method: 'get',
url: '/api/getinfo',
headers: {
'Authorization': token
}
})

以上就是Vue http傳遞參數(shù)的常用方法。