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

猜你喜欢

转载自www.cnblogs.com/yinxingen/p/9816902.html