• 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)

  • 相关阅读:
    现在入行程序员,等于49年入国军
    轻松学习jQuery控制DOM
    零基础Linux_16(基础IO_文件)笔试选择题:文件描述符+ionde和动静态库
    前端项目继承,在A项目中继承base项目,使用vue2
    (十四)线程(基础)
    哺乳动物组织和培养细胞提取蛋白—Abbkine ExKine总蛋白提取试剂盒
    基于JAVA养老智慧服务平台计算机毕业设计源码+系统+mysql数据库+lw文档+部署
    centos7搭建DNS服务完整版
    频控阵(FDA)信号检测
    axis和axis2的一些发布差异(WSDL2Java)
  • 原文地址:https://blog.csdn.net/qq_45796592/article/details/139652925