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