uniapp打包生成的H5获取URL里面的参数
阐述
在使用uniapp的时候,可能会打包各种版本的应用,包括H5页面,需求不同,H5页面的应用方式也是不一样的,我这里的H5页面就是通过后端的链接拼接参数,生成二维码 然后这个链接里面会有相关的参数,通过URL的方式获取到这些参数,在页面中使用。
链接的两种格式
- 我这里的域名就用xxx代替了,具体的域名路径可以找后端获取。
错误的链接:
https://xxx.xxx.com/cjyzwap/index.html?EB=2716523281900000000000231627&name=27%E7%BE%8A%E8%82%89#/
正确的链接:
https://xxx.xxx.com/cjyzwap/#/?EB=%27165232819000000000002382%27&name=%27%E7%BE%8A%27&Wcounter=%2725%27&addTime=%272022-03-24%2018%3A16%3A19%27
原因如下:
-
错误的链接为什么 是不对的呢,因为是vue的路由问题,Vue的路由有两种模式。hash 和 history H5页面呢,一般使用 history 居多,这两种路由模式可自行去Vue官网查看。
-
在后端生成链接的时候,不能写成
https://xxx.xxx.com/cjyzwap/index.html?
要按照history这种格式https://xxx.xxx.com/cjyzwap/#/?
来进行拼接参数。 -
如果要没有参数的话
https://xxx.xxx.com/cjyzwap/index.html
这种方式也是可以访问到页面的。要是有参数就要严格按照 正确的链接 进行拼接。这样才能使用 this.$route.query 获取参数。
获取参数的代码如下:
onLoad(option) {
console.log("option", option) // option也可以直接获取到
console.log("获取浏览器参数1-onload:", this.$route.query) // 获取浏览器参数
const urlRequest = this.$route.query
this.pdata.push({
EB: urlRequest.EB,
Wcounter: urlRequest.Wcounter,
addTime: urlRequest.addTime,
name: urlRequest.name
})
},