echarts 点击柱状图如何跳转到新页面,新页面window.location.search取到的值为什么是空?

发布于 2022-09-12 23:53:16 字数 2736 浏览 22 评论 0

需求:在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取值为空。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

只等公子 2022-09-19 23:53:16

第一个问题 this指向的原因吧

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文