【uniapp打包生成的H5获取URL里面的参数】

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