vue 獲取url里參數(shù)的兩種方法小結(jié)
我就廢話不多說了,大家還是直接看代碼吧~
第一種:
const query = Qs.parse(location.search.substring(1))
let passport = query.passport;
第二種:
var query=this.$route.query;
let lat = query.lat;
補充知識:Vue通過query獲取路由參數(shù)
現(xiàn)在來講Vue通過query獲取路由參數(shù)



可以看見com1組件里的路由參數(shù)為 name=zhangsan&job=teacher
使用 this.$route.query 來獲取路由參數(shù)
現(xiàn)在就是利用query直接獲取路由參數(shù)并且以對象的形式展現(xiàn)出來

點擊按鈕之后,查看控制臺,可以看見:


路由參數(shù)以對象的形式展現(xiàn)了出來
但是query獲取的參數(shù)要注意一個問題:不可以直接渲染 query的路由參數(shù)對象,不然會報錯
比如:我想在頁面上直接打印query獲取的路由參數(shù)對象

會報這樣的錯誤:

error in render 說明這是渲染錯誤
雖然不能渲染query獲取的路由參數(shù)對象,但是可以渲染query獲取的路由參數(shù)對象的屬性值
例如:

成功渲染

控制臺也不報錯。
以上這篇vue 獲取url里參數(shù)的兩種方法小結(jié)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. 基于android studio的layout的xml文件的創(chuàng)建方式2. 詳解Android studio 動態(tài)fragment的用法3. 圖文詳解vue中proto文件的函數(shù)調(diào)用4. 解決Android studio xml界面無法預(yù)覽問題5. Spring Boot和Thymeleaf整合結(jié)合JPA實現(xiàn)分頁效果(實例代碼)6. 什么是python的自省7. Android如何加載Base64編碼格式圖片8. 使用Android studio查看Kotlin的字節(jié)碼教程9. Vuex localStorage的具體使用10. Vue封裝一個TodoList的案例與瀏覽器本地緩存的應(yīng)用實現(xiàn)

網(wǎng)公網(wǎng)安備