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")
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
webpack dev-server代理websocket问题
这篇文章主要介绍了webpack dev-server代理websocket问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
下面小编就为大家带来一篇vue router-link传参以及参数的使用实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
vue3 ts编写echart是tooltip无法展示的解决
这篇文章主要介绍了vue3 ts编写echart是tooltip无法展示的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了详解Vue中组件传值的多重实现方式,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-08-08
vue video和vue-video-player实现视频铺满教程
这篇文章主要介绍了vue video和vue-video-player实现视频铺满教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
在Vue环境下利用worker运行interval计时器的步骤
这篇文章主要介绍了在Vue环境下利用worker运行interval计时器的步骤，本文分步骤给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-08-08
今天小编就为大家分享一篇vue 实现input表单元素的disabled示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
vue3的defineExpose宏函数是如何暴露方法给父组件使用
当子组件使用setup后,父组件就不能像vue2那样直接就可以访问子组件内的属性和方法,这个时候就需要在子组件内使用defineExpose宏函数来指定想要暴露出去的属性和方法,本文介绍vue3的defineExpose宏函数是如何暴露方法给父组件使用,需要的朋友可以参考下2024-05-05
vue3的ref,computed,reactive和toRefs你都了解吗
这篇文章主要为大家详细介绍了vue3的ref,computed,reactive和toRefs，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
这篇文章主要介绍了谈谈我在vue-cli3中用预渲染遇到的坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
最新评论