基于vue中获取当前url携带的参数
前言:
今天在开发项目的过程中,需要用的调用企业微信的接口,获取用户的相关信息,后端给的url里面携带了几个参数,需要前端获取一下,然后再把这些参数传入到get的api请求中。
加QQ技术交流群741843152,一起讨论哦~~~~
欢迎访问我个人博客,里面有更多干货哟~~:点击即可访问
关注博主微信公众号,获取更多关于前端的干货哦
获取?后面的参数
http://192.168.1.105:8080/#/idInput?username=%22%E5%BC%A0%E4%B8%89%22
获取参数方法 let id = this.$route.query.username
获取不带?的URL中的参数
http://192.168.1.12:8080/#/home/newsinfo/234
在路由中配置路由
{ path: '/home/newsinfo/:id', component: Newsinfo }
.vue页面设置
<template>
<router-link :to="'/home/newsinfo/' + item.id">
</template>
获取参数方法 let id = this.$route.params.id
注:转载于leahtao作者,点击即可访问
直接干代码
1.先在data中定义好全局变量
```javascript
data() {
retrue {
staffNo:'',
tenantId:'',
}
}
2.在vue的created中写上
created() {
// 界面构建时开始获取url里携带的参数
let staffNo = this.$route.query.staffNo
let tenantId = this.$route.query.tenantId
this.staffNo = staffNo
this.tenantId = tenantId
console.log(staffNo)
console.log(tenantId)
this.getBillDetails()
// 这个一定是放在获取参数之后的
this.getBillDetails()
},
3.就是发起具体的网络请求了
getBillDetails() {
getBillDetail(this.staffNo,this.tenantId).then(res => {
const data = res.data.data
this.obj = data
console.log(data)
// 判断服务器端返回的数据是要显示男或者女,返回true和false
this.obj.sex === '男' ? this.showImage = true : this.showImage = false
})
}