vue项目获取浏览器地址栏参数方法 ?aaa=111bbb=222（非路由传参）

vue项目获取浏览器地址栏参数?aaa=111&bbb=222（非路由传参）
项目中遇到一个需求，就是另一个管理系统带参直接单纯的跳转跳转到vue pc项目中的某个页面，后再初始化查询数据，参数以地址栏的形式传入

管理系统：打开新地址地址（跳转新页面使用 _blank ）

let obj = { id: 21, name: “测试传参” };
window.open(“http://localhost:8080/loginM?obj=” + JSON.stringify(obj),"_blank");

pc项目获取地址栏参数：(抽离出来作为一个模块使用)

export function getUrlKey(name){
return decodeURIComponent((new RegExp(’[?|&]’ + name + ‘=’ + ‘([^&;]+?)(&|#|;|$)’).exec(location.href) || [, “”])[1].replace(/+/g, ‘%20’)) || null
}

在newPage.vue文件中调用：

import {getUrlKey} from ‘./getUrlKey.js’
data() {
　　return {
　　　　data :’’,
　　}
},
created(){
// 地址栏：http://localhost:8080/loginM?obj={%22id%22:21,%22name%22:%22%E6%B5%8B%E8%AF%95%E4%BC%A0%E5%8F%82%22}#/login
　　//获取地址栏参数 this.data = getUrlKey(‘obj’)
　　 console.log(this.data.id) //21
},

vue项目获取浏览器地址栏参数方法 ?aaa=111bbb=222（非路由传参）相关推荐

vue获取浏览器地址栏参数(?及/)路由+非路由实现方式
1.? 参数浏览器参数形式:http://javam4.com/m4detail?id=1322914793170014208 1.1.路由取参方式 this.$route.query.id 前端跳 ...
vue组件间通信传递数据的四种方式（路由传参、父子组件传参、兄弟组件传参、深层次传参）
前言: vue组件间通信对于经常来写vue的伙伴来说应该是很轻松的,对于一些刚入门的伙伴来说可能就有些迷茫,感觉方式有很多种,但是总结起来又不知道应该怎么说,在下面的文章中,我结合自己的开发过程中经常 ...
Vue进阶（六十五）：Vue 隐藏浏览器地址栏参数或者将整个地址栏都隐藏只显示根目录
在使用Vue进行前端项目开发过程中,会遇到出于安全考虑,浏览器地址栏禁止显示方法参数的需求.以下方法可实现以上需求. 注:该方法存在页面刷新方法参数无法获取问题,需要另作处理(例如sessionSto ...
js获取url地址栏参数的方法，解决中文乱码问题，能支持中文参数
js获取url地址栏参数的方法,解决中文乱码问题,能支持中文参数参考文章: (1)js获取url地址栏参数的方法,解决中文乱码问题,能支持中文参数 (2)https://www.cnblogs.co ...
vue获取项目端口号_vue修改vue项目运行端口号的方法
一.导语最近在研究,左侧是导航,右侧是显示对应的内容,左右可单独滚动,不互相影响,如何实现? 萝卜蹲的游戏大家都玩过,白萝卜蹲,白萝卜蹲,白萝卜蹲完红萝卜蹲,可是若是在含有滚动条的页面的情况下,白萝 ...
C#操作IE浏览器(打开url、获取浏览器地址栏的地址、模拟百度搜索)
下面的代码参考 https://www.cnblogs.com/kissdodog/p/3725774.html,非我原创,所以就标为转载注意:下面的方法只适用于系统自带的IE浏览器,其它浏览器不适 ...
怎么获取浏览器地址栏的URL？怎么加密？
1.console.log(window.location.href); //获取浏览器地址栏的整个url2.console.log(window.location.protocol); //获取浏览 ...
vue项目某个APP页面实现手机物理按键返回、路由拦截、localStorage存取参数
vue项目某个APP页面实现手机物理按键返回.路由拦截.localStorage存取参数最近做个功能:在web系统里面嵌套两个app页面,当然APP页面在web系统上没有路由跳转,而是从另外系统扫码 ...
vue项目获取上传、下载进度
在日常项目中大文件下载或者上传,花费的时间比较长,没有任何提示,用户体验很差. 需要优化,提示文件在下载中,并且显示进度百分比. 1.onUploadProgress 文件上传进度监听一般 onU ...
Vue项目中background-image属性设置方法
vue项目中background-image属性设置方法方式一:直接访问在vue-cli项目中的放在public目录下的资源会被直接复制,不会经过webpack的打包处理. <span cl ...

vue项目获取浏览器地址栏参数方法 ?aaa=111bbb=222（非路由传参）

vue项目获取浏览器地址栏参数方法 ?aaa=111bbb=222（非路由传参）相关推荐

最新文章

热门文章