vue如何直接獲取url中的參數(shù)
更新時(shí)間：2024年03月01日 10:30:53 作者：小志的博客
這篇文章主要介紹了vue如何直接獲取url中的參數(shù)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
一、場景描述
- 前端vue框架項(xiàng)目，后端springboot框架；
- lz的需求場景是集成單點(diǎn)登錄，通過登錄頁面路徑后追加參數(shù)，向后端springboot項(xiàng)目發(fā)送請(qǐng)求，后端接收請(qǐng)求后同時(shí)獲取到追加的參數(shù)。
二、解決方式
- 網(wǎng)上有說通過路由的方式，lz嘗試后失敗
- lz采用不通過路由直接獲取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的登錄頁面中該方法
//AuthToken 表示vue項(xiàng)目登錄頁面路徑后追加的參數(shù)
let AuthToken=this.$urlParse.getUrlKey("AuthToken")
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
淺析Visual Studio Code斷點(diǎn)調(diào)試Vue
本篇文章給大家總結(jié)了Visual Studio Code斷點(diǎn)調(diào)試Vue的方法以及心得分享，需要的朋友參考學(xué)習(xí)下。2018-02-02
Vue通過配置WebSocket并實(shí)現(xiàn)群聊功能
本篇文章將與各位開發(fā)者分享下 vue-native-websocket 庫的使用以及配置，通過實(shí)例代碼給大家分享Vue通過配置WebSocket并實(shí)現(xiàn)群聊功能，需要的朋友可以參考下2019-12-12
Vue?中的?computed?和?watch?的區(qū)別詳解
這篇文章主要介紹了Vue中的computed和watch的區(qū)別詳解，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09
Vue實(shí)現(xiàn)無限輪播效果時(shí)動(dòng)態(tài)綁定style失效的解決方法
最近在開發(fā)中遇到了一個(gè)新需求：列表輪播滾動(dòng),實(shí)現(xiàn)方式也有很多,比如使用第三方插件,但是由于不想依賴第三方插件,想自己實(shí)現(xiàn),于是我開始了嘗試,但是在這個(gè)過程中遇到了動(dòng)態(tài)綁定style樣式不生效,所以本文介紹了Vue實(shí)現(xiàn)無限輪播效果時(shí)動(dòng)態(tài)綁定style失效的解決方法2024-08-08
這篇文章主要為大家詳細(xì)介紹了vue回到頂部監(jiān)聽滾動(dòng)事件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-08-08
今天小編就為大家分享一篇vue.js循環(huán)radio的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要為大家詳細(xì)介紹了vue使用代理解決請(qǐng)求跨域問題，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要介紹了vue3的沙箱機(jī)制的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-04-04
nginx部署訪問vue-cli搭建的項(xiàng)目的方法
本篇文章主要介紹了nginx部署訪問vue-cli搭建的項(xiàng)目的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02
利用vue.js把靜態(tài)json綁定bootstrap的table方法
今天小編就為大家分享一篇利用vue.js把靜態(tài)json綁定bootstrap的table方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08