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")
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
淺析Visual Studio Code斷點調(diào)試Vue
本篇文章給大家總結(jié)了Visual Studio Code斷點調(diào)試Vue的方法以及心得分享，需要的朋友參考學(xué)習(xí)下。2018-02-02
本篇文章將與各位開發(fā)者分享下 vue-native-websocket 庫的使用以及配置，通過實例代碼給大家分享Vue通過配置WebSocket并實現(xiàn)群聊功能，需要的朋友可以參考下2019-12-12
Vue?中的?computed?和?watch?的區(qū)別詳解
這篇文章主要介紹了Vue中的computed和watch的區(qū)別詳解，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
Vue實現(xiàn)無限輪播效果時動態(tài)綁定style失效的解決方法
最近在開發(fā)中遇到了一個新需求：列表輪播滾動,實現(xiàn)方式也有很多,比如使用第三方插件,但是由于不想依賴第三方插件,想自己實現(xiàn),于是我開始了嘗試,但是在這個過程中遇到了動態(tài)綁定style樣式不生效,所以本文介紹了Vue實現(xiàn)無限輪播效果時動態(tài)綁定style失效的解決方法2024-08-08
這篇文章主要為大家詳細介紹了vue回到頂部監(jiān)聽滾動事件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-08-08
今天小編就為大家分享一篇vue.js循環(huán)radio的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要為大家詳細介紹了vue使用代理解決請求跨域問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要介紹了vue3的沙箱機制的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-04-04
本篇文章主要介紹了nginx部署訪問vue-cli搭建的項目的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
利用vue.js把靜態(tài)json綁定bootstrap的table方法
今天小編就為大家分享一篇利用vue.js把靜態(tài)json綁定bootstrap的table方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08