vue/react/js 常用的原生获取当前页面的url网址的相关方法

目录

第一章 场景

第二章 总结

---

第一章 场景

最近实现需求时遇到这么一种情况：

• 本地url ——

• 线上url —— 

• 需求：需要将token清除掉 
• 注意事项：token不是#/后面的参数，说明并不是我们前端返回的，vue路由的方法使用不了
• 首次解决的方法：

window.location.href = '/'

•  发现问题：使用该方法本地解决了测试也没问题，但是上线出现了问题，可以发现线上的url事件上是.com下面还有一个路径，这是这个网址下面有不同的文件夹从而造成的，但是我们使用的方法window.location.href = '/'是调整到根路径.com/下，从而造成问题没有真正的解决。
• 最终解决思路：通过思考得到方案——获取路径的信息，然后通过'?'分割截取前面一部分，然后再跳转这个接口即可。

window.location.href = window.location.href.split('?')[0]

• 反思：小编最开始以为 window.location.href 方法只是单纯的赋值跳转而已，没想到这个方法也是可以获取当前页面的url路径；对他们没有充分理解。经过学习，小编总结了下面这些原生的实际场景中会用到的方法

第二章 总结

 http://192.168.124.131:8089/?token=b9b....6ae03193f3c7#/test?a=123&b=321
 为例(都是针对history模式的方法):

• window.location.href （当前url）

console.log(window.location.href)

注意：可以利用 window.location.href 赋值跳转到新的对应的页面

扩展：window.open(url, name, parameters)也可以用于打开一个新的浏览器窗口或在一个已存在的窗口中加载URL，其中常用的name参数有以下配置项：

1. _self：在当前窗口加载URL（默认行为）。
2. _parent：在父框架或父窗口中加载URL。
3. _top：在整个浏览器窗口或标签页中加载URL，取消所有框架。
4. _blank：在新窗口或新标签页中加载URL。

• window.location.protocol （协议）

console.log(window.location.protocol)

• window.location.host（域名+端口号）

console.log(window.location.host)

 

• window.location.hostname （域名）

console.log(window.location.hostname)

 

• window.location.port （端口号）

console.log(window.location.port )

 

• window.location.pathname（路由路径）

console.log(window.location.pathname)

 

注意：小编这里的路径是hash模式的所以输出为 /  ；如果是history模式择输出 /test

• window.location.search （请求的参数）

console.log(window.location.search)

 

• window.location.origin （根路径）

console.log(window.location.origin)