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;
補(bǔ)充知識(shí)：Vue通過query獲取路由參數(shù)
現(xiàn)在來講Vue通過query獲取路由參數(shù)
可以看見com1組件里的路由參數(shù)為 name=zhangsan&job=teacher
使用 this.$route.query 來獲取路由參數(shù)
現(xiàn)在就是利用query直接獲取路由參數(shù)并且以對(duì)象的形式展現(xiàn)出來
點(diǎn)擊按鈕之后，查看控制臺(tái)，可以看見：
路由參數(shù)以對(duì)象的形式展現(xiàn)了出來
但是query獲取的參數(shù)要注意一個(gè)問題：不可以直接渲染 query的路由參數(shù)對(duì)象，不然會(huì)報(bào)錯(cuò)
比如：我想在頁面上直接打印query獲取的路由參數(shù)對(duì)象
會(huì)報(bào)這樣的錯(cuò)誤：
error in render 說明這是渲染錯(cuò)誤
雖然不能渲染query獲取的路由參數(shù)對(duì)象，但是可以渲染query獲取的路由參數(shù)對(duì)象的屬性值
例如：
成功渲染
控制臺(tái)也不報(bào)錯(cuò)。
以上這篇vue 獲取url里參數(shù)的兩種方法小結(jié)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue車牌號(hào)校驗(yàn)和銀行校驗(yàn)實(shí)戰(zhàn)
這篇文章主要介紹了vue車牌號(hào)校驗(yàn)和銀行校驗(yàn)實(shí)戰(zhàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
Vue3實(shí)現(xiàn)Element Plus表格的多選功能與條件操作
Element-plus是ElementUI的升級(jí)版,是一套基于vue2與vue3的桌面端組件庫,它提供了豐富的組件幫助開發(fā)人員快速構(gòu)建功能強(qiáng)大、風(fēng)格統(tǒng)一的頁面,本文給大家介紹了Vue3實(shí)現(xiàn)Element Plus表格的多選功能與條件操作,需要的朋友可以參考下2024-08-08
Vue3組件掛載之創(chuàng)建組件實(shí)例詳解
這篇文章主要為大家介紹了Vue3組件掛載之創(chuàng)建組件實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
vue中v-model如何綁定多循環(huán)表達(dá)式實(shí)戰(zhàn)案例
v-model綁定的變量無論是對(duì)象還是數(shù)組都是綁定的value值,下面這篇文章主要給大家介紹了關(guān)于vue中v-model如何綁定多循環(huán)表達(dá)式的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
使用Vite搭建vue3+TS項(xiàng)目的實(shí)現(xiàn)步驟
本文主要介紹了使用Vite搭建vue3+TS項(xiàng)目的實(shí)現(xiàn)步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
基于Vue2的移動(dòng)端開發(fā)環(huán)境搭建詳解
這篇文章主要給大家介紹的是基于Vue2的移動(dòng)端環(huán)境搭建，移動(dòng)端大家更多想到的是響應(yīng)布局，我們根據(jù)不同大小的屏幕進(jìn)行適配，當(dāng)然少不了我們的重頭戲rem，移動(dòng)端相比pc端就沒什么特別的了。我會(huì)一步一步帶領(lǐng)大家進(jìn)入Vue2的世界，感興趣的朋友下面來一起學(xué)習(xí)學(xué)習(xí)吧。2016-11-11
Vue系列之Element?UI表單自定義校驗(yàn)規(guī)則
表單校驗(yàn)是注冊(cè)環(huán)節(jié)中必不可少的操作,表單校驗(yàn)可以提醒用戶填寫數(shù)據(jù)規(guī)則以確保用戶提交數(shù)據(jù)的效性,也可以防止用戶因誤操作而占用服務(wù)器資源,這篇文章主要給大家介紹了關(guān)于Vue系列之Element?UI表單自定義校驗(yàn)規(guī)則的相關(guān)資料,需要的朋友可以參考下2022-09-09
vue-router 源碼實(shí)現(xiàn)前端路由的兩種方式
這篇文章主要介紹了vue-router 源碼實(shí)現(xiàn)前端路由的兩種方式，主要介紹Hash 路由和History 路由，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
vue元素實(shí)現(xiàn)動(dòng)畫過渡效果
這篇文章主要介紹了vue元素實(shí)現(xiàn)動(dòng)畫過渡效果，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
下面小編就為大家分享一篇解決vue頁面DOM操作不生效的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03