当前位置: 首页 > news >正文

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)

相关文章:

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

目录 第一章 场景 第二章 总结 第一章 场景 最近实现需求时遇到这么一种情况: 本地url —— 线上url —— 需求:需要将token清除掉 注意事项:token不是#/后面的参数,说明并不是我们前端返回的,vue路由的方法使用不…...

java-final 关键字

## Java中的final关键字 ### 1. final关键字的基本概念 final是Java中一个非常重要的关键字,用于声明常量、阻止继承和重写,确保类、方法和变量的不可变性。具体来说,final关键字可以用来修饰类、方法和变量(包括成员变量和局部…...

ARM32开发--IIC软实现

知不足而奋进 望远山而前行 目录 文章目录 前言 开发流程 GD32F4软件I2C初始化 GD32F4软件I2C引脚功能 写操作 读操作 总结 前言 在嵌入式系统开发中,软件实现的I2C通信协议扮演着至关重要的角色。本文将深入探讨如何在GD32F4系列微控制器上实现软件I2C功能…...

在有向无环图(DAG)中实现拓扑排序与最短路径和最长路径算法

有向无环图(DAG)是一类非常重要的图结构,广泛应用于任务调度、数据依赖分析等领域。本文将介绍如何在DAG中实现拓扑排序、单源最短路径和单源最长路径算法,并提供完整的Java代码示例。 图结构定义 首先,我们定义一个…...

SQLServer按照年龄段进行分组查询数据

1.按照年龄段对数据进行分组, 将人群分为:青年,中年,老年三种类型,人群类型加上其他分组字段如:性别,进行多条件分组,统计各个年龄段多少人 Select case sex when 1 then ‘男’ when 2 then …...

开放式耳机哪个品牌质量比较好?2024高性价比机型推荐!

随着音乐技术的不断发展,开放式耳机已成为音乐发烧友们的另外一种选择。从最初的简单音质,到如今的高清解析,开放式耳机不断进化升级。音质纯净,佩戴舒适,无论是街头漫步还是家中放松时候,都能带给你身临其…...

Blender骨骼创建

骨骼系统 建立 使用Shift A添加骨骼或在添加|骨架中添加一段骨骼 骨骼的三种模式 -物体模式:做动画,摆人物pose时在该模式 -编辑模式:进行骨骼搭建(选择一段骨骼,然后按E挤出一段骨骼并进行调整) -姿…...

DevExpress WPF中文教程:Grid - 如何完成列和编辑器配置(设计时)?

DevExpress WPF拥有120个控件和库,将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpress WPF能创建有着强大互动功能的XAML基础应用程序,这些应用程序专注于当代客户的需求和构建未来新一代支持触摸的解决方案。 无论是Office办公软件…...

高考完的三个月想自学点编程,有没有什么建议

👆点击关注 获取更多编程干货👆 对于刚刚完成高考的学生来说,无论未来是否选择计算机科学作为专业方向,自学编程技能是一项非常有价值的投资,掌握编程知识能够帮助同学们为将来的学习和科研 实践奠定一个基础。 随着…...

运维开发(DevOps):加速软件交付的关键方法

1. 什么是运维开发 运维开发(DevOps)是将软件开发(Development)与信息技术运维(Operations)的流程整合在一起的实践方法。DevOps的目标是通过增强开发和运维团队之间的协作,提高软件产品的发布…...

Vue前端环境搭建:从四个方面、五个方面、六个方面和七个方面深度解析

Vue前端环境搭建:从四个方面、五个方面、六个方面和七个方面深度解析 在构建Vue.js项目时,搭建一个稳定且高效的前端环境至关重要。这不仅关乎项目的顺利推进,更直接影响开发者的效率和代码质量。本文将从四个方面、五个方面、六个方面和七个…...

农业领域科技查新点提炼方法附案例!

农业学科是人类通过改造和利用生物有机体(植物、动物、微生物等)及各种自然资源(光、热、水、土壤等)生产出人类需求的农产品的过程,人类在这一过程中所积累的科学原理、技术、工艺和技能,统称为农业科学技术,该领域具有研究范围广、综合性强…...

【Bazel入门与精通】 rules之属性

https://bazel.build/extending/rules?hlzh-cn#attributes Attributes An attribute is a rule argument. Attributes can provide specific values to a target’s implementation, or they can refer to other targets, creating a graph of dependencies. Rule-specifi…...

Elementor无需第三方插件实现高级下拉菜单/巨型菜单

使用新的嵌套功能创建美观的菜单和大型菜单。巨型菜单是具有复杂导航结构和独特设计的网站的理想选择。 Elementor-设置-特性-Menu启用 之后再去前端编辑器设计即可,就会有一个新的menu菜单模块了。 这个菜单的下拉则是通过Elementor直接来设计,也就以为…...

【数学】什么是傅里叶变换?什么是离散傅里叶变换?什么是拉普拉斯变换?

文章目录 什么是傅里叶变换?什么是离散傅里叶变换?什么是拉普拉斯变换?背景公式示例题目详细讲解Python代码求解实际生活中的例子 什么是线性时不变系统线性性(Linearity)时不变性(Time-Invariance&#xf…...

opencv安装笔记 各种平台

目录 python安装opencv-python c 麒麟arm系统安装和用法 python安装opencv-python pypi上搜索 Search results PyPI 现在安装是一个版本,大于3.6都可以安装 c 麒麟arm系统安装和用法 参考: ffmpeg rknn麒麟系统 安装 opencv_ffmpeg4 解码示例-CSDN…...

前端开发中的热更新原理

一、什么是热更新 热更新(Hot Module Replacement,HMR)是一种在前端开发中极为重要的技术。它允许开发者在不重新加载整个页面的情况下,实时更新应用程序中的某些模块。简单来说,热更新能让你在开发过程中即时看到代码…...

unix环境高级编程第2版:深入探索UNIX编程的奥秘

unix环境高级编程第2版:深入探索UNIX编程的奥秘 在数字世界的浩瀚海洋中,UNIX环境以其稳定、高效和灵活的特性,一直备受程序员们的青睐。而《unix环境高级编程第2版》这本书,无疑是探索UNIX编程奥秘的绝佳指南。接下来&#xff0…...

力扣42 接雨水

听说字节每人都会接雨水,我也要会哈哈哈 数据结构:数组 算法:核心是计算这一列接到多少雨水,它取决于它左边的最大值和右边的最大值,如下图第三根柱子能接到的雨水应该是第一根柱子高度和第五根柱子高度的最小值减去第…...

【代码随想录】【算法训练营】【第35天】[134]加油站 [135]分发糖果 [860]柠檬水找零 [406]根据身高重建队列

前言 思路及算法思维,指路 代码随想录。 题目来自 LeetCode。 day 35,连休两天~ 题目详情 [134] 加油站 题目描述 134 加油站 解题思路 前提:数组 思路:全局贪心算法:最小累加剩余汽油为负数,说明…...

PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节,供应链协同管理在供应链上下游企业之间建立紧密的合作关系,通过信息共享、资源整合、业务协同等方式,实现供应链的全面管理和优化,提高供应链的效率和透明度,降低供应链的成…...

Swift 协议扩展精进之路:解决 CoreData 托管实体子类的类型不匹配问题(下)

概述 在 Swift 开发语言中,各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过,在涉及到多个子类派生于基类进行多态模拟的场景下,…...

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案,答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年,()预言了电磁波的存在,并指出…...

在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module

1、为什么要修改 CONNECT 报文? 多租户隔离:自动为接入设备追加租户前缀,后端按 ClientID 拆分队列。零代码鉴权:将入站用户名替换为 OAuth Access-Token,后端 Broker 统一校验。灰度发布:根据 IP/地理位写…...

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡(如 HAProxy、AWS NLB、阿里 SLB)发起上游连接时,将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后,ngx_stream_realip_module 从中提取原始信息…...

(二)原型模式

原型的功能是将一个已经存在的对象作为源目标,其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现,忽略对象创建过程中的其它细节。 📌 核心特点: 避免重复初…...

ArcGIS Pro制作水平横向图例+多级标注

今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作:ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等(ArcGIS出图图例8大技巧),那这次我们看看ArcGIS Pro如何更加快捷的操作。…...

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

算法:模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣(LeetCode) ​遍历字符串​:通过外层循环逐一检查每个字符。​遇到 ? 时处理​: 内层循环遍历小写字母(a 到 z)。对每个字母检查是否满足: ​与…...