淺析vue-router中params和query的區(qū)別
1.引入方式不同
query要用path來(lái)引入
this.$router.push({
path: 'test',
query: {
type: 2,
detail: '哈哈'
}
})
params要用name來(lái)引入
this.$router.push({
name: 'test',
query: {
type: 2,
detail: '哈哈'
}
})
2.url不同
query在url中顯示參數(shù)
http://localhost:8080/detail?type=0&detail=哈哈
params在url中不顯示參數(shù)
下面整理一下這兩者的差別：
1、用法上的
剛才已經(jīng)說(shuō)了，query要用path來(lái)引入，params要用name來(lái)引入，接收參數(shù)都是類(lèi)似的，分別是this.$route.query.name和this.$route.params.name。
注意接收參數(shù)的時(shí)候，已經(jīng)是$route而不是$router了哦?。?/p>
2、展示上的
query更加類(lèi)似于我們ajax中g(shù)et傳參，params則類(lèi)似于post，說(shuō)的再簡(jiǎn)單一點(diǎn)，前者在瀏覽器地址欄中顯示參數(shù)，后者則不顯示
query:
params:
總結(jié)
以上所述是小編給大家介紹的vue-router中params和query的區(qū)別，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
Vue使用pdfobject實(shí)現(xiàn)預(yù)覽pdf的示例詳解
PDFObject?是一個(gè)?JavaScript?庫(kù)用來(lái)在HTML中動(dòng)態(tài)嵌入?PDF?文檔。這篇文章主要為大家詳細(xì)介紹了使用pdfobject實(shí)現(xiàn)預(yù)覽pdf的功能，需要的可以了解一下2023-03-03
在本篇內(nèi)容里小編給大家整理了關(guān)于Vue用cmd創(chuàng)建項(xiàng)目的方法講解，有興趣的朋友們跟著學(xué)習(xí)下。2019-02-02
下面小編就為大家分享一篇在vue中實(shí)現(xiàn)圖片和文件上傳的示例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue中的base64圖片轉(zhuǎn)網(wǎng)絡(luò)URL方式
在Vue中,可以直接將Base64編碼的圖片賦值給img元素的src屬性,此外,也可以通過(guò)JavaScript的URL.createObjectURL()方法將Base64轉(zhuǎn)換為Blob URL,進(jìn)而轉(zhuǎn)換為File對(duì)象,并可進(jìn)一步轉(zhuǎn)換為PNG或其他格式的圖片,這種轉(zhuǎn)換技術(shù)在前端開(kāi)發(fā)中非常實(shí)用2024-10-10
詳解vue2如何實(shí)現(xiàn)點(diǎn)擊預(yù)覽本地文件
這篇文章主要為大家詳細(xì)介紹了vue2如何實(shí)現(xiàn)點(diǎn)擊預(yù)覽本地的word、excle、pdf文件,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04
基于vue3.0.1beta搭建仿京東的電商H5項(xiàng)目
這篇文章主要介紹了基于vue3.0.1beta搭建仿京東的電商H5項(xiàng)目，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
Elementui表格組件+sortablejs實(shí)現(xiàn)行拖拽排序的示例代碼
這篇文章主要介紹了Elementui表格組件+sortablejs實(shí)現(xiàn)行拖拽排序，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
vue3使用vite搭建的項(xiàng)目需要安裝的插件/配置方式
這篇文章主要介紹了vue3使用vite搭建的項(xiàng)目需要安裝的插件/配置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
keepalive是Vue的內(nèi)置組件,作用是將組件緩存在內(nèi)存當(dāng)中,防止重復(fù)渲染DOM,屬于消耗內(nèi)存獲取速度,這篇文章主要介紹了vue3項(xiàng)目keepAlive使用方法,主要將keepaliev在vue3.0中的用法,需要的朋友可以參考下2024-03-03
Vue3中defineEmits、defineProps?不用引入便直接用
這篇文章主要介紹了Vue3中defineEmits、defineProps?不用引入便直接用，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09