vue项目获取地址栏参数(非路由传参)
在项目中,遇到一个需求,就是另一个系统直接跳转到我们项目中的某个页面,不需要做用户的校验直接单纯的跳转新页面,再初始化查询数据,参数以地址栏的形式传入
由于原来项目做过权限控制,所以在路由那边需要进行配置(部分代码):
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项目获取地址栏参数(非路由传参)的更多相关文章
- vue项目获取当前地址栏参数(非路由传参)
项目中遇到一个需求,就是另一个管理系统带参直接单纯的跳转跳转到vue pc项目中的某个页面,后再初始化查询数据,参数以地址栏的形式传入 管理系统:打开新地址地址 let obj = { id: 21, ...
- vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题
最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...
- vue路由传参页面刷新参数丢失问题解决方案
最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...
- Vue路由传参及传参后刷新导致参数消失处理
项目功能需要,要从列表页跳转到第三方提供的URL上(这里第三方页面我是通过iframe引入在详情页,目的是点击返回时可以通过keepAlive让列表页不刷新,如果不通过iframe直接跳第三方链接,那 ...
- angular路由传参和获取路由参数的方法
1.首先是需要导入的模块 import { Router } from "@angular/router";//路由传参用到 import{ActivatedRoute,Param ...
- vue 路由传参中刷新页面参数丢失 及传参的几种方式?
在页面跳转中,我通过路由传参,结果发现页面参数丢失了.路径返回了根目录.... 1. 先说下路由传参的几种方式吧? 比如:<div v-for="item in items" ...
- Vue框架(四)——路由跳转、路由传参、cookies、axios、跨域问题、element-ui模块
路由跳转 三种方式: $router.push / $router.go / router-link to this.$router.push('/course'); this.$router.pus ...
- vue路由传参的几种基本方式
原文地址 this.$router.push跳转 现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据.父组件中: <li v-for="article i ...
- vue路由传参并跳转页面
在vue项目中参数的传递可以使用本地缓存或者Vuex,那么vue能不能像小程序一样路由传参呢,显然是可以的而且非常简单 方式一:query传参 //传参 go(){ that.$router.push ...
随机推荐
- java-设计模式-索引
设计模式的七大原则 设计模式遵循的七大原则 微信红包的设计实践 单例模式 常见的几种单例模式写法 单例模式的应用场景及优缺点 面向对象六大设计原则 JAVA设计模式之观察者模式 JAVA设计模式之策略 ...
- Android 开发 上拉加载更多功能实现
实现思维 开始之前先废话几句,Android系统没有提供上拉加载的控件,只提供了下拉刷新的SwipeRefreshLayout控件.这个控件我们就不废话,无法实现上拉刷新的功能.现在我们说说上拉加载更 ...
- 实现自己的HashMap
准备工作 ,实现自己的Map.entry.代码如下 : import java.util.Map;public class MapEntry<K,V> implements Map.Ent ...
- redis锁机制介绍与实例
转自:https://m.jb51.net/article/154421.htm 今天小编就为大家分享一篇关于redis锁机制介绍与实例,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要 ...
- ARM-start.s注释(2410Init.s)
本人只是做个笔记保存一下. 来源:http://blog.itpub.net/13771794/viewspace-478463/ ;================================= ...
- Redis安全以及备份还原
启用密码 配置密码,配置文件中添加节点requirepass,如下root即passwordrequirepass root可以在登陆的时候用-a 指定password登陆,也可以不指定,登陆之后使用 ...
- SpringBoot之配置
回顾 SpringBoot之基础 配置文件 ① 两种全局配置文件(文件名是固定的) 配置文件放在src/main/resources目录或者类路径/config下 application.proper ...
- Java采用RSA加密及解密技术的有关Maven项目的配置流程:
第一步: 获得RSA公钥私钥(秘钥格式:PKCS#8 ,测试使用的是无私钥密码的) 公钥: -----BEGIN PUBLIC KEY----- MIGfMA0GCSqGSIb3DQEBAQUAA4G ...
- js解决下拉列表框互斥选项的问题
如图不区分选项与其他选项是互斥的关系,当选择了不区分时,其他选项就要去除,当有其他选项存在时,就不能有不区分 解决办法:定义change事件,若列表发生改变,首先判断点击的是否是不区分,若是,则将其他 ...
- C语言基础02
1. .so -- shared object,用户层的动态库 ..ko -- kernel object,内核模块,可以在Linux内核起来之后动态的加载和卸载. 2.