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

最新推荐文章于 2025-05-19 18:21:43 发布

Sherry慈

最新推荐文章于 2025-05-19 18:21:43 发布

阅读量6.4k

点赞数 3

CC 4.0 BY-SA版权

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

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

HTML5 专栏收录该内容

11 篇文章

订阅专栏

本文深入探讨了前端开发中常见的URL操作技巧，包括如何使用window.location.href获取完整URL，利用this.$route.path和this.$route.fullPath获取路径信息，以及通过this.$route.query和this.$route.params获取URL参数。同时，文章还对比了this.$router和this.$route在路由操作上的不同之处。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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