vue如何直接获取url中的参数
更新时间：2024年03月01日 10:30:53 作者：小志的博客
这篇文章主要介绍了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")
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
写本篇文章之前其实也关注过vue中的一个关于加载动态组件is的API，最开始研究它只是用来实现一个tab切换的功能,需要的朋友可以参考下2019-05-05
在 Vue + Vite 项目中,当使用环境变量进行条件组件加载时,在生产环境打包后可能会出现 CSS 样式丢失的问题,本文通过代码示例给大家介绍了三种解决方案,需要的朋友可以参考下2025-08-08
这篇文章主要介绍了vue实现点击按钮input保持聚焦状态,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2025-06-06
在前后端分离项目中,跨域是一定会出现的问题,下面这篇文章主要给大家介绍了关于Vue学习笔记之跨域的6种解决方案,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-04-04
Vue动态构建混合数据Treeselect选择树及巨树问题的解决
这篇文章主要介绍了Vue动态构建混合数据Treeselect选择树及巨树问题的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了vue动态显示图片报错404的解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
vue3使用vue3-print-nb main.ts报错声明文件找不到的解决
在Vue3中使用vue3-print-nb时,因第三方包类型文件缺失导致全局引入报错,手动声明可解决,打印预览需清除标题、地址等样式以优化输出,理解原理灵活应对问题2025-07-07
axios是基于promise的HTTP库，可以使用在浏览器和node.js中，它不是vue的第三方插件，vue-axios是axios集成到Vue.js的小包装器，可以像插件一样安装使用:Vue.use(VueAxios, axios)，本文给大家介绍Vue axios和vue-axios关系，感兴趣的朋友一起看看吧2022-08-08
这篇文章主要介绍了vue使用el-select下拉框匹配不到值的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了Vue中如何实现字符串换行问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
最新评论