在项目中,遇到一个需求,就是另一个系统直接跳转到我们项目中的某个页面,不需要做用户的校验直接单纯的跳转新页面,再初始化查询数据,参数以地址栏的形式传入

由于原来项目做过权限控制,所以在路由那边需要进行配置(部分代码):

const newPage = {
path:'/newPage',
component:() =>
import ('../views/newPage/newPage.vue').then(m => m.default),
} export default new Router({
mode: 'hash',
base: __dirname,
routes: [
login,
views,
noFound,
notMenu,
newPage
],
})

重点::

获取地址栏?后面参数的方法:

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 {
LIFNR:'',
}
},
created(){
// 地址栏:`http://localhost:9527/#/newPage?LIFNR=1000000524`
//获取地址栏参数
this.LIFNR = getUrlKey('LIFNR')
console.log(this.LIFNR) //1000000524
},

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

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

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

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

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

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

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

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

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

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

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

  6. vue 路由传参中刷新页面参数丢失 及传参的几种方式?

    在页面跳转中,我通过路由传参,结果发现页面参数丢失了.路径返回了根目录.... 1. 先说下路由传参的几种方式吧? 比如:<div v-for="item in items" ...

  7. Vue框架(四)——路由跳转、路由传参、cookies、axios、跨域问题、element-ui模块

    路由跳转 三种方式: $router.push / $router.go / router-link to this.$router.push('/course'); this.$router.pus ...

  8. vue路由传参的几种基本方式

    原文地址 this.$router.push跳转 现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据.父组件中: <li v-for="article i ...

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

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

随机推荐

  1. (6.1)linux操作系统基础

    Linux介绍: Linux是一种自由和开放源码的操作系统,存在着许多不同的Linux版本,但它们都使用了Linux内核.Linux可安装在各种计算机硬件设备中,比如手机.平板电脑.路由器.台式计算机 ...

  2. 使用Java创建指定大小的空文件夹

    /** 方法一 * 创建固定大小的文件 * @param file * @param length * @throws IOException */ public static void create ...

  3. Win7+ 电脑 休眠 自动唤醒

    https://jingyan.baidu.com/article/3ea51489d905df52e71bba6b.html

  4. MM-科目自动分配

    SAP系统篇 MM自动记账解析之基本概念(01) https://blog.csdn.net/qq_33641781/article/details/78027802 MM自动记账解析之功能实现(02 ...

  5. docker 独立搭建linux + php 随笔

    参考了 https://www.jianshu.com/p/fcd0e542a6b2  dodos大佬的一些经验 1.首先,由于nginx跟php的特性,使得二者可以单独作为独立容器存在,所以为了使h ...

  6. 【译】图解Transformer

    目录 从宏观上看Transformer 把张量画出来 开始编码! 从宏观上看自注意力 自注意力的细节 自注意力的矩阵计算 "多头"自注意力 用位置编码表示序列的顺序 残差 解码器 ...

  7. git 创建新项目 本地仓库和远程仓库的合并

    1.$ git pull origin master --allow-unrelated-histories 告诉系统允许合并不相关历史的内容 2.git branch --set-upstream ...

  8. SQLServer与MySQL约束/索引命名的一些差异总结

    约束是数据库完整性的保证,主要分为:主键/外键/唯一键/默认值/check等类别,约束是一个逻辑概念,表示数据的某些特性(不能为空,唯一,必须满足某些条件等等),索引是一个逻辑与物理概念的结合,逻辑上 ...

  9. Oracle使用学习笔记(一)

    一.实体关系模型的三个关键因素 实体:具有相同特征和属性的显示世界事务的抽象,对应面向对象编程中的类,动物就是一个实体 属性:实体具有的特征,如类的属性,动物的名字,体长等 关系:一对一,一对多,多对 ...

  10. Servlet的三大作用域

    Servlet的三大作用域 一.request  请求对象 共享的数据:请求共享 特点:同一次请求中,共享数据可以获取(请求一旦结束,请求共享清除站)(请求转发能共享参数,重定向不行) 代码:req. ...