项目中遇到一个需求,就是另一个管理系统带参直接单纯的跳转跳转到vue pc项目中的某个页面,后再初始化查询数据,参数以地址栏的形式传入

管理系统:打开新地址地址

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 :'',
  }
},
  //获取地址栏参数 this.data = getUrlKey('obj')
   console.log(this.data.id) //21
},

vue项目获取当前地址栏参数(非路由传参)的更多相关文章

  1. vue项目获取地址栏参数(非路由传参)

    在项目中,遇到一个需求,就是另一个系统直接跳转到我们项目中的某个页面,不需要做用户的校验直接单纯的跳转新页面,再初始化查询数据,参数以地址栏的形式传入 由于原来项目做过权限控制,所以在路由那边需要进行 ...

  2. vue获取浏览器地址栏参数(?及/)路由+非路由实现方式

    1.? 参数 浏览器参数形式:http://javam4.com/m4detail?id=1322914793170014208 1.1.路由取参方式 this.$route.query.id 前端跳 ...

  3. vue路由传参并跳转页面

    在vue项目中参数的传递可以使用本地缓存或者Vuex,那么vue能不能像小程序一样路由传参呢,显然是可以的而且非常简单 方式一:query传参 //传参 go(){ that.$router.push ...

  4. vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题

    最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...

  5. vue路由传参页面刷新参数丢失问题解决方案

    最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...

  6. Vue路由传参及传参后刷新导致参数消失处理

    项目功能需要,要从列表页跳转到第三方提供的URL上(这里第三方页面我是通过iframe引入在详情页,目的是点击返回时可以通过keepAlive让列表页不刷新,如果不通过iframe直接跳第三方链接,那 ...

  7. vue 通过 name 和 params 进行调整页面传参刷新参数丢失问题&vue路由可选参数

    vue  通过 name 和 params 进行调整页面传参刷新参数丢失问题 router.js: export default new Router({ routes: [ { path: '/', ...

  8. js获取url地址栏参数

    前端开发中经常会遇到需要获取url地址栏参数问题 方法如下: function getQueryStringByName(name){ var src = "www.baidu.com?na ...

  9. angular路由传参和获取路由参数的方法

    1.首先是需要导入的模块 import { Router } from "@angular/router";//路由传参用到 import{ActivatedRoute,Param ...

随机推荐

  1. KaTeX.js

    KaTeX.js 官网:https://khan.github.io/KaTeX/

  2. 微服务架构之spring cloud gateway

    Spring Cloud Gateway是spring cloud中起着非常重要的作用,是终端调用服务的入口,同时也是项目中每个服务对外暴露的统一口径,我们可以在网关中实现路径映射.权限验证.负载均衡 ...

  3. 单选按钮(RadioButton)

    一:RadioButton的相关属性: 1.Activity //单选按钮 public class RadioButtonActivity extends Activity { private Co ...

  4. 查询login什么时候过期

    -- Show all logins where the password is over 60 days old --查看60天没改密码的login SELECT name, LOGINPROPER ...

  5. 对于over-posting的防御

    over-posting简单的说就是指用户通过猜测等手段得知了后端数据Model的属性名称,在数据更新或添加的时候提交了本不应该允许用户更改的数据库字段,并且在服务器端因为没有进行防御而将恶意提交的数 ...

  6. August 25th 2017 Week 34th Friday

    Stop to have a rest, do not forget others still in the running. 停下来休息的时候,不要忘记别人还在奔跑. You don't need ...

  7. [EffectiveC++]item22:Declare data members private

    将成员变量隐藏在函数接口的背后,可以为“所有可能的实现”提供弹性, 假设我们有一个public成员变量,而我们最终取消了它,多少代码可能会被破坏呢?那是一个不可知的大量. protected成员变量就 ...

  8. Eclipse和JDK的安装配置

    工欲善其事,必先利其器.最近开始学习Java语言,必不可少的要先安装一个IDE,我选择了eclipse,下面我们讲讲如何来安装及配置. Step1:工具的下载 这里我们需要用到三个工具安装包,JDK. ...

  9. Python ,pickle

    @Python pickle模块学习   pickle提供了一个简单的持久化功能.可以将对象以文件的形式存放在磁盘上. ---------------------------------------- ...

  10. python下操作redis

    python安装这里我只介绍如何在Windows上安装redis,以及接下来的实践都是在Windows上进行的.在Windows上安装python的依赖库,常用的方法有两种,第一种是直接通过pip i ...