vue如何直接获取url中的参数
作者：小志的博客
这篇文章主要介绍了vue如何直接获取url中的参数问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
一、场景描述
- 前端vue框架项目，后端springboot框架；
- lz的需求场景是集成单点登录，通过登录页面路径后追加参数，向后端springboot项目发送请求，后端接收请求后同时获取到追加的参数。
二、解决方式
- 网上有说通过路由的方式，lz尝试后失败
- lz采用不通过路由直接获取url中参数的方法尝试成功
三、解决步骤
1、在vue项目根目录下创建一个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参数 Vue.prototype.$urlParse=urlParse //注册全局方法
3、vue的登录页面中该方法
//AuthToken 表示vue项目登录页面路径后追加的参数
let AuthToken=this.$urlParse.getUrlKey("AuthToken")
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。