vue 獲取url里參數(shù)的兩種方法小結(jié)
我就廢話不多說(shuō)了，大家還是直接看代碼吧~
第一種：
const query = Qs.parse(location.search.substring(1))
let passport = query.passport;
第二種：
var query=this.$route.query;
let lat = query.lat;
補(bǔ)充知識(shí)：Vue通過(guò)query獲取路由參數(shù)
現(xiàn)在來(lái)講Vue通過(guò)query獲取路由參數(shù)
可以看見com1組件里的路由參數(shù)為 name=zhangsan&job=teacher
使用 this.$route.query 來(lái)獲取路由參數(shù)
現(xiàn)在就是利用query直接獲取路由參數(shù)并且以對(duì)象的形式展現(xiàn)出來(lái)
點(diǎn)擊按鈕之后，查看控制臺(tái)，可以看見：
路由參數(shù)以對(duì)象的形式展現(xiàn)了出來(lái)
但是query獲取的參數(shù)要注意一個(gè)問(wèn)題：不可以直接渲染 query的路由參數(shù)對(duì)象，不然會(huì)報(bào)錯(cuò)
比如：我想在頁(yè)面上直接打印query獲取的路由參數(shù)對(duì)象
會(huì)報(bào)這樣的錯(cuò)誤：
error in render 說(shuō)明這是渲染錯(cuò)誤
雖然不能渲染query獲取的路由參數(shù)對(duì)象，但是可以渲染query獲取的路由參數(shù)對(duì)象的屬性值
例如：
成功渲染
控制臺(tái)也不報(bào)錯(cuò)。
以上這篇vue 獲取url里參數(shù)的兩種方法小結(jié)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
全局安裝 Vue cli3 和 繼續(xù)使用 Vue-cli2.x操作
這篇文章主要介紹了全局安裝 Vue cli3 和 繼續(xù)使用 Vue-cli2.x操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
這篇文章主要給大家介紹了關(guān)于vue中jsonp插件的使用方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
vue中的el-form表單rule校驗(yàn)問(wèn)題(特殊字符、中文、數(shù)字等)
這篇文章主要介紹了vue中的el-form表單rule校驗(yàn)問(wèn)題(特殊字符、中文、數(shù)字等)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue+iview+less+echarts實(shí)戰(zhàn)項(xiàng)目總結(jié)
本篇文章是作者通過(guò)學(xué)習(xí)vue+iview+less+echarts制作一個(gè)小系統(tǒng)后，做的心得以及遇到的坑的總結(jié)，值得大家學(xué)習(xí)參考。2018-02-02
vue綁定數(shù)字類型 value為數(shù)字的實(shí)例
這篇文章主要介紹了vue綁定數(shù)字類型 value為數(shù)字的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
vue-router如何實(shí)現(xiàn)history模式配置
這篇文章主要介紹了vue-router如何實(shí)現(xiàn)history模式配置，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
使用JSONP主要是目的通過(guò)動(dòng)態(tài)創(chuàng)建Script，動(dòng)態(tài)拼接url，進(jìn)而抓取數(shù)據(jù)，實(shí)現(xiàn)跨域。這篇文章主要介紹了VUE2.0中Jsonp的使用方法（前端）,需要的朋友可以參考下2018-05-05
vue3安裝vant實(shí)現(xiàn)按需引入和全局引入
本文主要介紹了vue3安裝vant實(shí)現(xiàn)按需引入和全局引入，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要介紹了vue綁定class與行間樣式style的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
vue3模塊創(chuàng)建runtime-dom源碼解析
這篇文章主要為大家介紹了vue3模塊創(chuàng)建runtime-dom源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01