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)

相关推荐

  1. 获取页面标签元素dom方法

    2024-06-14 12:22:02       57 阅读
  2. vue获取当前页面路由,判断是否为指定页面

    2024-06-14 12:22:02       62 阅读
  3. 【Qt】Qt QML获取当前时间各种方式

    2024-06-14 12:22:02       44 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-06-14 12:22:02       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-06-14 12:22:02       106 阅读
  3. 在Django里面运行非项目文件

    2024-06-14 12:22:02       87 阅读
  4. Python语言-面向对象

    2024-06-14 12:22:02       96 阅读

热门阅读

  1. 黑苹果/Mac如何升级 Mac 新系统 Sequoia Beta 版

    2024-06-14 12:22:02       34 阅读
  2. 文本相似度的三种算法

    2024-06-14 12:22:02       28 阅读
  3. WPS中XLS表格使用的技巧记录

    2024-06-14 12:22:02       29 阅读
  4. 2024年湘潭大学软件体系结构考试总结

    2024-06-14 12:22:02       30 阅读
  5. 探索未来:前沿科技的突破与挑战

    2024-06-14 12:22:02       26 阅读
  6. 轻兔推荐 —— Syncthing

    2024-06-14 12:22:02       27 阅读
  7. spark mllib 特征学习笔记 (一)

    2024-06-14 12:22:02       25 阅读
  8. 华为网络设备攻击防范

    2024-06-14 12:22:02       30 阅读
  9. 探索Spring Boot的自动配置机制

    2024-06-14 12:22:02       26 阅读