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)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/852252.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

悦库企业网盘 /user/login/.html SQL注入漏洞复现

0x01 产品简介 悦库企业网盘是一款专为满足企业文件管理、协同办公、文件共享需求而设计的私有部署安全、简单的企业文件管理系统。该产品全面覆盖企业文件管理场景,提供一系列功能强大且操作简便的解决方案,助力企业提升效率、降低管理成本。悦库企业网盘提供精细的权限管理…

小程序无法调用服务端问题排查

1、问题描述 突然有一天线上的小程序不能登录,经查小程序无法调用。经查无法小程序页面无法调用后台服务。 2、排查过程 由于无法登录小程序发布服务器,无法测试小程序前端服务器到服务端网络,并且小程序无法看到日志。所以就得从服务端和网…

工厂环境中ESD防静电系统对静电灾害的预防与控制

静电在工厂环境中可能造成严重的危害,包括火灾、爆炸和设备损坏等。因此,对于工厂环境中的静电灾害,采取预防和控制措施是非常必要的。ESD防静电系统是一种用来预防和控制静电灾害的重要解决方案,它可以有效地降低静电危害发生的可…

jfif格式怎么转换成jpg?关于将jfif转成jpg的几种方法

jfif格式怎么转换成jpg?JFIF格式是一种常见的图像文件格式,通常用于存储数字照片。然而,在某些情况下,你可能需要将JFIF格式转换为JPG格式。JPG格式是一种广泛使用的图像格式,它被支持和接受的程度比JFIF更高。PNG是一…

在Lua解释器中注册自定义函数库

本文目录 1、引言2、注册原理3、实例4、程序验证 文章对应视频教程: 暂无,可以关注我的B站账号等待更新。 点击图片或链接访问我的B站主页~~~ 1、引言 在现代软件开发中,Lua因其轻量级、高效和可嵌入性而被广泛使用。作为一种灵活的脚本语言…

qt仿制qq登录界面

#include "mainwindow.h"MainWindow::MainWindow(QWidget *parent): QMainWindow(parent) {// 设置窗口大小this->resize(window_width, window_heigth);// 固定窗口大小this->setFixedSize(window_width, window_heigth);// 设置窗口图标this->se…

React 中的 Lanes

React 中有一个 Lane 的概念,Lane 就像高速路上的不同车道,具有不同优先级,在 React Lane 通过一个 32 位的二进制数来表示。越小优先级别越高,SyncLane 级别最高。用二进制存储的方式,可以通过逻辑操作快速判断 Lane …

使用Stream实现Web应用,使用YOLOv8模型对图像进行目标检测为例。

Streamlit是一个开源的Python框架,专门设计用于快速构建和共享数据应用程序。它使数据科学家和机器学习工程师能够通过编写简单的Python脚本,轻松创建美观、功能强大的Web应用程序,而无需具备前端开发的经验。 其他框架或web应用可以看下面两…

加湿器如何实现缺液提醒功能

随着科学技术的不断发展,加湿器也走进我们的生活,缺液提醒功能是加湿器的重要功能,加湿器如何实现缺液提醒功能?只需液位传感器即可实现。 光电液位传感器利用光学原理,通过检测光线在不同介质中的折射和反射变化来检…

Ubuntu server 24 (Linux) Zabbix 7.0 LTS 配置mail邮件报警

1 告警--媒介 选择右边默认模板修改 2 用户设置--配置--报警媒介 3 告警--动作--触发器动作 #测试 sudo systemctl stop zabbix-agent 本文使用postfix自建邮件服务器,如有需要请看

讯飞有一个可以根据描述文本自动生成PPT的AI接口,有趣

文档:https://www.xfyun.cn/doc/spark/PPTGeneration.html 价格方面提供了免费1000点的额度,生成一次是10点,正好100次,如果要购买的话最低要购买1344元的,没有按量付费的模式,个人小开发者可买不起。 让我…

短剧APP小程序开发之小程序内存管理挑战:短剧缓存与释放策略探讨(第二篇)

在上一篇帖子中,我们探讨了小程序内存管理的限制以及缓存策略的设计。本篇将进一步探讨释放策略的具体实现以及优化方案,以支持大量短剧内容的加载和播放。 释放策略的具体实现 监听内存警告:小程序提供了监听内存警告的API,开发…

【Linux】进程控制3——进程程序替换

一,前言 创建子进程的目的之一就是为了代劳父进程执行父进程的部分代码,也就是说本质上来说父子进程都是执行的同一个代码段的数据,在子进程修改数据的时候进行写时拷贝修改数据段的部分数据。 但是还有一个目的——将子进程在运行时指向一个…

Apple ID已成历史,在ios18中正式更名为Apple Account

随着iOS18的首个开发者预览版成功推送,众多热衷于尝鲜的用户已纷纷升级并开启全新体验。在这个版本中,备受瞩目的Apple ID正式迎来了它的进化——更名为Apple Account,并且拥有了中文名称“Apple账户”或简称“苹果账户”。 不过目前官网还称…

【机器学习】新网络环境docker实战:AI智能体平台DIFY部署与升级

目录 一、引言 二、Dify在dockerhub被禁用后,如何部署、升级 2.1 网络及硬件条件 2.2 docker部署、升级方案 三、总结 一、引言 关于dify,之前力推过,大家可以跳转 AI智能体研发之路-工程篇(二):Dify…

Python基于车牌识别的车辆进出管理系统

目录 1、效果图2、具体内容系统流程开发工具和环境项目所需依赖包目录描述:启动Django服务登录账号 3、源码下载技术交流 博主介绍: 计算机科班人,全栈工程师,掌握C、C#、Java、Python、Android等主流编程语言,同时也熟…

Dom操作——操作元素,各种事件

Dom操作——操作元素,各种事件 文章目录 Dom操作——操作元素,各种事件一、操作元素操作内容操作属性操作样式 二、各种事件单击事件onload事件键盘事件鼠标事件焦点事件 一、操作元素 操作内容 1、经验: 修改 HTML 内容的最简单的方法时使…

Mysql数据类型解析

1、MySQL 数据类型 MySQL 支持多种类型,大致可以分为三类:数值、日期/时间和字符串(字符)类型。 1.2、查看Mysql编码格式 mysql> show variables like "%char%"; ----------------------------------------------…

283. 移动零 (Swift版本)

题目描述 最容易想到的解法 从后向前遍历, 发现0就通过交换相邻元素将0移动到最后 class Solution {func moveZeroes(_ nums: inout [Int]) {for index in (0..<nums.count).reversed() {if nums[index] 0 {moveZeroes(&nums, index)}}}func moveZeroes(_ nums: inout …

为什么 JavaScript 在国外逐渐用于前端+后端开发

这个问题其实没人能给出可证伪的结论&#xff0c;那不如干脆给一个感性的答案: 因为阿里“不争气”。 确切的说&#xff0c;因为阿里的nodejs团队没卷赢&#xff0c;至少暂时还没卷赢&#xff0c;没拿到真正有价值的业务场景&#xff0c;做出真正有说服力的案例项目。刚好我有…