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