vue hash路由参数混杂在#之前的解决办法

446 阅读1分钟

如果某个vue的页面带有参数,很有可能会变成如下的形式:

http://127.0.0.1:5555/online/?type=woman#/

参数type被混杂在了 #之前,这样导致的坏处有两点

1 取参不方便,this.$router.query会取不到参数

2 如果你有这样一种需求, 它很有可能会影响到你的操作:进页面取参,根据参数发起请求。混在#前的参数将不能通过 delete this.router.query删除,也不能通过this.router.query删除,也不能通过 this.router.push(path,query)进行覆盖。

解决办法:

使用new URL() 后得到以下信息对地址重新拼接后改变url

image.png

如本例中,

let url = new URL(‘<http://127.0.0.1:5555/online/?type=woman#/’>)
let newUrl = url.origin + url.pathname + url.hash;
根据自己的要求,看是否还需要query,最后window.replace(新地址即可)