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
},


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM