H5客户端获取Url参数的方法

一,window.location.href: 获取完整的url链接
二,this.$ route.path:前端路由中配置的path
三,this.$ route.fullPath:当前页面除去协议,域名后的完整链接
四,以对象的形式获取当前Url链接?后面拼接的参数,有以下两种方法:
1,this.$route.query
2,以函数的形式,函数参数可以不传:

function GetRequest(str) {
    var url = str ? str : decodeURI(location.search); //获取url中"?"符后的字串
    var theRequest = new Object();
    if (url.indexOf('?') != -1) {
        url = url.substr(1);
    }
    if (url) {
        var strs = url.split('&');
        for (var i = 0; i < strs.length; i++) {
            var srtArry = strs[i].split('=');
            var y = srtArry.shift();
            theRequest[y] = unescape(srtArry.join('='));
        }
    }
    return theRequest;
}

五,获取从上个页面传递过来的参数,有以下两种方法:
1,this.$ route.query
A.vue

this.$router.push({
    path: '/B',    // B完整的path
    query: {
        number: '111111111111111',
        cityNo: '21',
        latitude: '31.24',
        longitude: '121.67',
        type: 'sssss'
    }
});

B.vue
用this.$ route.query就可以获取A.vue中传递过来的参数,并且当前页面会显示带参数的完整的Url,刷新页面后参数依然存在
2,this.$ route.params:
A.vue

this.$router.push({
    name: 'B',
    params: {
        number: '111111111111111',
        cityNo: '21',
        latitude: '31.24',
        longitude: '121.67',
        type: 'sssss'
    }
});

B.vue
用this.$route.params就可以获取A.vue中传递过来的参数,但是当前页面的Url不会显示拼接的参数,并且刷新页面后参数不会存在

最后,大家有没有注意到在A.vue和B.vue中用到的分别是this.$ router和this.$ route,两者之家有什么区别呢?
this.$ router是全局路由对象,每个页面都可以调用push, go等方法
this.$route表示当前正在跳转的路由对象,可以调用其path, name, query, params等属性

发布了48 篇原创文章 · 获赞 27 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/weixin_41480546/article/details/97168679
今日推荐