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)文章
Vue 級聯(lián)下拉框的設(shè)計與實現(xiàn)
在前端開發(fā)中，級聯(lián)選擇框是經(jīng)常用到的，這樣不僅可以增加用戶輸入的友好性，還能減少前后端交互的數(shù)據(jù)量。本文就介紹一下使用Vue實現(xiàn)級聯(lián)下拉框，感興趣的可以了解一下2021-07-07
這篇文章主要介紹了vue中三種調(diào)用接口的方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了簡單了解Vue + ElementUI后臺管理模板,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了vue項目中的組件傳值方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
在本篇文章里小編給各位分享的是關(guān)于Vue發(fā)布項目的實例內(nèi)容以及知識點講解，需要的朋友們參考下。2019-07-07
這篇文章主要介紹了如何在vue 中使用柱狀圖 并自修改配置，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
這篇文章主要為大家詳細介紹了vue樹形控件tree的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vue3實現(xiàn)手機上可拖拽元素的組件，用vue3實現(xiàn)一個可在手機上拖拽元素的組件，可拖拽至任意位置，并且可以防止拖拽元素移出屏幕邊緣2022-09-09
解決vue-cli@3.xx安裝不成功的問題及搭建ts-vue項目
這篇文章主要介紹了解決vue-cli@3.xx安裝不成功的問題及搭建ts-vue項目.文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
公共Hooks封裝文件下載useDownloadFile實例詳解
這篇文章主要為大家介紹了公共Hooks封裝文件下載useDownloadFile實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11