我们在项目中可能会有相同的部分的内容,但是为了项目简单,就用一个页面承接多个入口。所以我们需要判断它的来源,到底是来自哪个入口,遇到这种情况,我们在跳转路由的时候,会传递参数,有人可能会说,我们跳转路由传参的时候,在生命周期函数里面,直接使用this.$router.query.id获取不就可以了吗?是可以的,也没有问题,但是我们跟安卓或者ios的时候,我们这样是拿不到传递过来的参数,这样,我们就有必要获取地址栏中的参数。
以下我说两种封装好的,一种是公司大佬封装的,会使用,但是不明白什么意思,所以自己也简单的封装了一下,可能很low,但是实用,也能看懂
我们新建一个js文件,在这个文件中写入下面的代码
export function getQueryStringByName (name) {
let result1 = document.location.search.match(new RegExp('[\\?\\&]' + name + '=([^\\&]+)', 'i'))
let result2 = document.location.hash && document.location.hash.match(new RegExp('[\\?\\&]' + name + '=([^\\&]+)', 'i'))
let result = result1 || result2
if (result === null || result.length < 1) {
return ''
}
return result[1]
}
而我们在需要实用的页面引入以及调用
import {getQueryStringByName} from '../../utils/index'
this.id = decodeURIComponent(getQueryStringByName('id'))
上面传递的id就是我们所要获取的参数key,如果我们要获取下面这个地址栏的参数
http://localhost:63342/%E5%B0%81%E8%A3%85/%E8%B0%83%E7%94%A8%E7%9A%84html.html?id=189&name=zhangsan&age=566
而此时的this.id就等于189,我们可以使用,上面具体封装的代码,我也不太清楚具体的原理。下面说下我自己封装的,大多数人都不会陌生
export function getItem(name) {
let url = window.location.href;
let urlItem = url.split("?")[1]
// console.log(urlItem)
if(url.indexOf("?") != -1) {
if(urlItem.indexOf("&") != -1){
// console.log(urlItem.split("&&"))
var obj={}
for(var i=0;i<urlItem.split("&").length;i++){
// console.log(urlItem.split("&&")[i].split("=")[0])
obj[urlItem.split("&")[i].split("=")[0]] = urlItem.split("&")[i].split("=")[1]
}
for(var key in obj){
//console.log(key,obj[key])
if(key === name){
return obj[key]
}else {
return
}
}
} else {
if(name === urlItem.split("=")[0]){
return urlItem.split("=")[1]
}else {
return false
}
}
}else {
return false
}
}
调用的方法,同上。如果大佬有其他更好的方法跟建议,望不吝赐教