vue3中哈希模式URL的参数拼接在#前获取失败问题

小熊汤圆

已于 2023-11-10 22:04:06 修改

阅读量1.2k

点赞数 1

文章标签： javascript vue.js 前端

于 2023-11-10 22:03:06 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_54686585/article/details/134341798

版权

本文介绍了在Vue3中，如何根据不同情况正确处理哈希模式URL（如#/开头）的参数获取问题，包括使用vue-router和window对象的location.href属性进行转换和解析。

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

vue3中，哈希模式URL的参数拼接在#/前，获取失败问题

1.正常获取
import {useRouter} from "vue-router"
let router = useRouter()
router.currentRoute.value.query//获取到是路径中的参数对象

2.通过window对象获取
let b = new URL(window.location.href);
let obj = convertQueryStringToObject(b.search.replace("?", ""))
//处理地址栏数据
function convertQueryStringToObject(queryString) {
var obj = {};
var pairs = queryString.split("&");

for (var i = 0; i < pairs.length; i++) {
  var pair = pairs[i].split("=");
  var key = decodeURIComponent(pair[0]);
  var value = decodeURIComponent(pair[1]);
  obj[key] = value;
}
return obj;
}

3.判断url中是否是#/结尾，如果是就用window对象来获取参数对象，否则就使用vue3的router来获取参数对象
if(window.location.href.endsWith("#/")){
    console.log("路由是有#/结尾");
    let b = new URL(window.location.href);
    //处理地址栏数据
    function convertQueryStringToObject(queryString) {
    var obj = {};
    var pairs = queryString.split("&");
    for (var i = 0; i < pairs.length; i++) {
        var pair = pairs[i].split("=");
        var key = decodeURIComponent(pair[0]);
        var value = decodeURIComponent(pair[1]);
        obj[key] = value;
    }
    return obj;
    }
    let obj = convertQueryStringToObject(b.search.replace("?", ""))//参数对象
}else{
    console.log("路由是有参数结尾");
    let router = useRouter();
   let obj = router.currentRoute.value.query//参数对象
}