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实现级联下拉框，感兴趣的可以了解一下2021-07-07
这篇文章主要介绍了vue中三种调用接口的方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了简单了解Vue + ElementUI后台管理模板,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-04-04
这篇文章主要介绍了vue项目中的组件传值方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
在本篇文章里小编给各位分享的是关于Vue发布项目的实例内容以及知识点讲解，需要的朋友们参考下。2019-07-07
这篇文章主要介绍了如何在vue 中使用柱状图 并自修改配置，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2021-01-01
这篇文章主要为大家详细介绍了vue树形控件tree的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了vue3实现手机上可拖拽元素的组件，用vue3实现一个可在手机上拖拽元素的组件，可拖拽至任意位置，并且可以防止拖拽元素移出屏幕边缘2022-09-09
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
这篇文章主要介绍了解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目.文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
公共Hooks封装文件下载useDownloadFile实例详解
这篇文章主要为大家介绍了公共Hooks封装文件下载useDownloadFile实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
最新评论