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

最新推荐文章于 2024-03-23 11:07:59 发布

Sherry慈

最新推荐文章于 2024-03-23 11:07:59 发布

阅读量5.9k

点赞数 3

分类专栏： HTML5 文章标签： H5 url参数

本文链接：https://blog.csdn.net/weixin_41480546/article/details/97168679

版权

HTML5 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一，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等属性