vue如何直接獲取url中的參數(shù)
更新時(shí)間：2024年03月01日 10:30:53 作者：小志的博客
這篇文章主要介紹了vue如何直接獲取url中的參數(shù)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
一、場(chǎng)景描述
- 前端vue框架項(xiàng)目，后端springboot框架；
- lz的需求場(chǎng)景是集成單點(diǎn)登錄，通過(guò)登錄頁(yè)面路徑后追加參數(shù)，向后端springboot項(xiàng)目發(fā)送請(qǐng)求，后端接收請(qǐng)求后同時(shí)獲取到追加的參數(shù)。
二、解決方式
- 網(wǎng)上有說(shuō)通過(guò)路由的方式，lz嘗試后失敗
- lz采用不通過(guò)路由直接獲取url中參數(shù)的方法嘗試成功
三、解決步驟
1、在vue項(xiàng)目根目錄下創(chuàng)建一個(gè)urlParse.js文件
export default{
getUrlKey:function(name){
return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&;]+?)(&|#|;|$)').exec(location.href)||[,""])[1].replace(/\+/g,'%20'))||null;
}
}
2、在vue項(xiàng)目根目錄下main.js中注冊(cè)全局方法
import urlParse from './urlParse' //獲取url參數(shù) Vue.prototype.$urlParse=urlParse //注冊(cè)全局方法
3、vue的登錄頁(yè)面中該方法
//AuthToken 表示vue項(xiàng)目登錄頁(yè)面路徑后追加的參數(shù)
let AuthToken=this.$urlParse.getUrlKey("AuthToken")
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue動(dòng)態(tài)注冊(cè)組件實(shí)例代碼詳解
寫本篇文章之前其實(shí)也關(guān)注過(guò)vue中的一個(gè)關(guān)于加載動(dòng)態(tài)組件is的API，最開始研究它只是用來(lái)實(shí)現(xiàn)一個(gè)tab切換的功能,需要的朋友可以參考下2019-05-05
Vue項(xiàng)目中條件加載組件導(dǎo)致CSS樣式丟失問(wèn)題的解決方案
在 Vue + Vite 項(xiàng)目中,當(dāng)使用環(huán)境變量進(jìn)行條件組件加載時(shí),在生產(chǎn)環(huán)境打包后可能會(huì)出現(xiàn) CSS 樣式丟失的問(wèn)題,本文通過(guò)代碼示例給大家介紹了三種解決方案,需要的朋友可以參考下2025-08-08
vue實(shí)現(xiàn)點(diǎn)擊按鈕input保持聚焦?fàn)顟B(tài)的示例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)點(diǎn)擊按鈕input保持聚焦?fàn)顟B(tài),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2025-06-06
在前后端分離項(xiàng)目中,跨域是一定會(huì)出現(xiàn)的問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于Vue學(xué)習(xí)筆記之跨域的6種解決方案,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
Vue動(dòng)態(tài)構(gòu)建混合數(shù)據(jù)Treeselect選擇樹及巨樹問(wèn)題的解決
這篇文章主要介紹了Vue動(dòng)態(tài)構(gòu)建混合數(shù)據(jù)Treeselect選擇樹及巨樹問(wèn)題的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
vue動(dòng)態(tài)顯示圖片報(bào)錯(cuò)404的解決
這篇文章主要介紹了vue動(dòng)態(tài)顯示圖片報(bào)錯(cuò)404的解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
vue3使用vue3-print-nb main.ts報(bào)錯(cuò)聲明文件找不到的解決
在Vue3中使用vue3-print-nb時(shí),因第三方包類型文件缺失導(dǎo)致全局引入報(bào)錯(cuò),手動(dòng)聲明可解決,打印預(yù)覽需清除標(biāo)題、地址等樣式以優(yōu)化輸出,理解原理靈活應(yīng)對(duì)問(wèn)題2025-07-07
Vue?axios庫(kù)發(fā)送請(qǐng)求的示例介紹
axios是基于promise的HTTP庫(kù)，可以使用在瀏覽器和node.js中，它不是vue的第三方插件，vue-axios是axios集成到Vue.js的小包裝器，可以像插件一樣安裝使用:Vue.use(VueAxios,?axios)，本文給大家介紹Vue?axios和vue-axios關(guān)系，感興趣的朋友一起看看吧2022-08-08
vue使用el-select下拉框匹配不到值的問(wèn)題及解決
這篇文章主要介紹了vue使用el-select下拉框匹配不到值的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了Vue中如何實(shí)現(xiàn)字符串換行問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10