這個(gè)函數(shù)呢是自己在寫基于Vue+ElementUI管理后臺(tái)時(shí)用到的,，下面列出來(lái)兩種使用方式：

最普通的，封裝一個(gè)js函數(shù)

/*** 對(duì)象轉(zhuǎn)url參數(shù)* @param {*} data* @param {*} isPrefix*/queryParams (data, isPrefix) {isPrefix = isPrefix ? isPrefix : falselet prefix = isPrefix ? '?' : ''let _result = []for (let key in data) {let value = data[key]// 去掉為空的參數(shù)if (['', undefined, null].includes(value)) {continue}if (value.constructor === Array) {value.forEach(_value => {_result.push(encodeURIComponent(key) + '[]=' + encodeURIComponent(_value))})} else {_result.push(encodeURIComponent(key) + '=' + encodeURIComponent(value))}}return _result.length ? prefix + _result.join('&') : ''}

在Vue組件化開(kāi)發(fā)時(shí)，我是這樣寫的

寫了一個(gè)工具文件utils.js，將其作為工具包引入Vue的main.js，并將其附給Vue原型，這樣在每個(gè)組件中就可以使用this.$utils來(lái)使用里面的一些工具函數(shù)了

utils.js文件

const utils = {/*** 對(duì)象轉(zhuǎn)url參數(shù)* @param {*} data* @param {*} isPrefix*/queryParams (data, isPrefix = false) {let prefix = isPrefix ? '?' : ''let _result = []for (let key in data) {let value = data[key]// 去掉為空的參數(shù)if (['', undefined, null].includes(value)) {continue}if (value.constructor === Array) {value.forEach(_value => {_result.push(encodeURIComponent(key) + '[]=' + encodeURIComponent(_value))})} else {_result.push(encodeURIComponent(key) + '=' + encodeURIComponent(value))}}return _result.length ? prefix + _result.join('&') : ''},// ....其他函數(shù)....}export default utils

main.js文件

import Vue from 'vue' import App from './App.vue' import utils from '@/utils/utils'// ...其他代碼...Vue.prototype.$utils = utils// ...其他代碼...

在使用的時(shí)候可以這樣寫

// ....其他代碼this.$utils.queryParams(this.params)// ...其他代碼... 如果有寫的不對(duì)或者不合適的地方請(qǐng)多多賜教，畢竟我還是個(gè)前端小菜雞，happy coding！

總結(jié)

以上是生活随笔為你收集整理的分享一个好用的函数吧，将js中的对象转成url参数的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。