+-
![echarts 点击柱状图如何跳转到新页面,新页面window.location.search取到的值为什么是空? echarts 点击柱状图如何跳转到新页面,新页面window.location.search取到的值为什么是空?](/img/no_img.png)
需求:在echarts 柱状图上可以点击跳转到其他页面并传参,在新的页面上能获取到参数;
问题1:为什么不能用this.$router.push跳转,只能用window.location.href做跳转?
列如:
/echarts图表点击跳转
myChart.on('click', function (param){
var name=param.name;
if(name=="用户数"){
window.location.hash="/lay/event-mana?type="+1
//window.location.href="/#/layout/event-management?type="+1;
(跳过去后真实完整路径是这样的http://localhost:900/#/lay/event-manag?type=1)
//这个是跳转不了
//this.$router.push(`/layout/event-management?type=${1}`);
}else if(name=="栏目数"){
window.location.hash="/lay/event-mana?type="+2
}else if(name=="新闻数"){
window.location.hash="/lay/event-mana?type="+3
}else{
window.location.hash="/lay/event-mana?type="+4
}
});
问题2:结果页面是跳转过去了,但是无论是location.search或是window.location.search取到的值都是空,各位前端大佬有什么方法解决下这个问题?
在新页面获取参数值,列如:
getRequest() {
//方法一
// let url = location.search; //获取url中"?"符后的字串
// console.log("location.search", location.search);
// let theRequest = new Object();
// if (url.indexOf("?") != -1) {
// let str = url.substr(1);//substr()方法返回从参数值开始到结束的字符串;
// let strs = str.split("&");
// for ( let i = 0; i < strs.length; i++ ) {
// theRequest[ strs[ i ].split( "=" )[ 0 ] ] = ( strs[ i ].split( "=" )[ 1 ] );
// }
// // console.log("theRequest", theRequest);
// }
// console.log("theRequest", theRequest);
//方法二
let searchURL = window.location.search;
console.log("window.location.search", window.location.search);
searchURL = searchURL.substring(1, searchURL.length);
let theRequest = searchURL.split("&")[0].split("=")[1];
console.log("theRequest", theRequest);
return theRequest;
}
原因:为什么 window.location.search 为空?
注意上面的search和hash的区别,如果URL中 ?之前有一个 # 比如:“http://localhost:63342/index....
那么使用window.location.search得到的就是空(“”)。因为“?type=35&id=5”串字符是属于“#/version?type=35&id=5”这个串字符的,也就是说查询字符串search只能在取到“?”后面和“#”之前的内容,如果“#”之前没有“?”search取值为空。
第一个问题 this指向的原因吧