目录
第一章 场景
第二章 总结
第一章 场景
最近实现需求时遇到这么一种情况:
- 本地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参数有以下配置项:
_self
:在当前窗口加载URL(默认行为)。_parent
:在父框架或父窗口中加载URL。_top
:在整个浏览器窗口或标签页中加载URL,取消所有框架。_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)