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 ... 
随机推荐
- oracle填坑之PLSQL中文显示为问号
			刚入坑oracle就遇到个坑. 坑描述: 系统:Windows7 oracle:同时安装,11g和12c(安装顺序,先装的12c然后装的11g) 坑:开始安装的12c用SQL Developer使用本 ... 
- electron builder 打包错误 cannot unpack electron zip file 解决方案
			npm run buildwin > study01@1.0.0 buildwin F:\Nodejs\electron\Test\study01> electron-builder -- ... 
- MySQL表数据的增删改查
			1.增 INSERT INTO tb VALUES(v1,v2,v3...); INSERT INTO tb (field1,field2...) VALUES(v1,v2...); INSERT I ... 
- 修改系统和MySQL时区
			修改时间时区比想象中要简单: 各版本系统通用的方法 # cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime # cp /usr/share/zone ... 
- 新装 Win7 系统装完驱动精灵,一打开到检测界面就卡死——原因与解决方案
			1.现象: 重装系统后,鼠标反应慢,且不能上网.因此装了个驱动精灵,准备更新下驱动,但驱动精灵一打开到检测界面就卡死(换驱动人生.鲁大师也一样). 2.原因: Win7 系统 iso 中自带的驱动程序 ... 
- Windows 2008 R2 域控制器防止意外删除现有OU的设置
			Windows 2008 R2 域控制器防止意外删除现有OU(组织单元)的设置:1.以管理员身份运行Active Directory的Windows PowerShell模块: 2.键入以下命令来检查 ... 
- UI设计篇·入门篇·简单动画的实现,透明动画/旋转动画/移动动画/缩放动画,混合动画效果的实现,为动画设置监听事件,自定义动画的方法
			基本的动画构成共有四种:透明动画/旋转动画/移动动画/缩放动画. 配置动画的方式有两种,一种是直接使用代码来配置动画效果,另一种是使用xml文档配置动画效果 相比而言,用xml文档写出来的动画效果,写 ... 
- 什么是P2P流标
			1.被动流标:在规定的投标时间内,一般是7天,没有凑齐这笔借款,就流标了: 2.主动流标:借款人或平台原因,将为投满的标下架,做流标处理 介绍: 对于投资者来说,在投资P2P理财的时候,可能会遇到过流 ... 
- js前台计算两个日期的间隔时间
			js前台计算两个日期的间隔时间(时间差)原创 2017年08月28日 16:09:43 标签:javascript 1144在后台传来两个时间字段,从中解析出两个字符串类型的日期格式 需要在前台解析出 ... 
- <Dare To Dream>团队项目用户验收评审
			实验十二 团队作业8—团队项目用户验收评审 任务1:团队作业Beta冲刺 Beta冲刺第一天:http://www.cnblogs.com/Dare-To-Dream/p/9226994.html B ... 
