vue3 window.location 获取正在访问的地址,也可以通过useRoute来获取相关信息。

news2024/10/7 19:51:45

1、一般我们在开发的vue3项目的时候,地址是这样:http://192.168.1.101:3100/#/login

然后我们在布署完成以后一般是这样https://xxx.yyyyy.com/uusys/#/login

其实xxx可以是www,也可以是一个二级域名

yyyyy.com是域名,uusys一般是虚拟目录,当然也可以省略这个看你如何布署及处理域名了。

2、window.location 给出的信息如下:

可以看到:href是完整的地址,如果你要重新赋值href就可以改变访问路径

下面是基本的路径显示,根据实际情况我们就可以处理成自己想要的路径了。

import { useRoute, useRouter } from 'vue-router';
 
export default {
  setup() {
    const route = useRoute(); // 获取当前路由对象
    const router = useRouter(); // 获取路由器对象
 
    // 获取当前路由的完整地址
    const currentPath = window.location.pathname;
 
    // 如果需要获取当前路由的路径
    const currentRoutePath = route.path;
 
    // 如果需要获取查询参数
    const queryParams = route.query;
 
    // 如果需要获取hash值
    const currentHash = window.location.hash;
 
    // 如果需要获取主机名
    const hostName = window.location.hostname;
 
    // 如果需要获取端口号
    const port = window.location.port;
 
    // 如果需要获取协议
    const protocol = window.location.protocol;
 
    return {
      currentPath,
      currentRoutePath,
      queryParams,
      currentHash,
      hostName,
      port,
      protocol
    };
  }
};

上面代码,来自baidu。

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

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

相关文章

家政小程序的开发:打造现代式便捷家庭服务

随着现代生活节奏的加快,人们越来越注重生活品质与便利性。在这样的背景下,家政服务市场迅速崛起,成为许多家庭日常生活中不可或缺的一部分。然而,传统的家政服务往往存在信息不对称、服务效率低下等问题。为了解决这些问题&#…

Windows编程上

Windows编程[上] 一、Windows API1.控制台大小设置1.1 GetStdHandle1.2 SetConsoleWindowInfo1.3 SetConsoleScreenBufferSize1.4 SetConsoleTitle1.5 封装为Innks 2.控制台字体设置以及光标调整2.1 GetConsoleCursorInfo2.2 SetConsoleCursorPosition2.3 GetCurrentConsoleFon…

elementPlus自定义el-select下拉样式

如何在f12元素选择器上找到下拉div呢? 给el-select添加 :popper-append-to-body"false" 即可,这样就可以将下拉框添加到body元素中去,否则当我们失去焦点,下拉就消失了,在元素中找不到el-select。剩下就可以…

华硕魔霸5原装Windows10原厂系统 工厂模式 带ASUS Recovery恢复功能

华硕工厂文件恢复系统 ,安装结束后带隐藏分区,一键恢复,以及机器所有驱动软件。 系统版本:Windows10 原厂系统下载网址:http://www.bioxt.cn 需准备一个20G以上u盘进行恢复 请注意:仅支持以上型号专用…

系统架构设计师 - 计算机网络(2)

计算机网络 计算机网络IPv6 ★概念IPv6 的优势IPv6 数据格式IPv6 地址应用IPv6 自动 IP 地址配置(了解)IPv4/IPv6过渡技术 网络接入(了解)综合布线系统 ★物联网(了解)概念分层 云计算(了解&…

顺序串算法库构建

学习贺利坚老师顺序串算法库 数据结构之自建算法库——顺序串_创建顺序串s1,创建顺序串s2-CSDN博客 本人详细解析博客 串的概念及操作_串的基本操作-CSDN博客 版本更新日志 V1.0: 在贺利坚老师算法库指导下, 结合本人详细解析博客思路基础上,进行测试, 加入异常弹出信息 v1.0补…

将一个程序设置为开机启动【win11】

Windows 在 Windows 系统中,可以通过在 “启动” 文件夹中放置程序的快捷方式来实现开机启动。 按照以下步骤操作: 按 Win R 打开 “运行” 对话框,输入 shell:startup,然后按回车。这将打开 “启动” 文件夹。 找到你想设置为…

动态规划——打家劫舍(C++)

好像,自己读的书确实有点少了。 ——2024年7月2日 198. 打家劫舍 - 力扣(LeetCode) 题目描述 你是一个专业的小偷,计划偷窃沿街的房屋。每间房内都藏有一定的现金,影响你偷窃的唯一制约因素就是相邻的房屋装有相互连…

Python特征工程 — 1.2 特征分箱

目录 1 什么是特征分箱 2 分箱的重要性及其优势 3 有监督分箱 3.1卡方分箱原理 3.2 决策树分箱 4 无监督分箱 4.1 等距分箱 4.2 等频分箱 4.3 分位数分箱 实验数据:链接:https://pan.baidu.com/s/1yT1ct_ZM5uFLgcYsaBxnHg?pwdczum 提取码&…

JAVA期末速成库(11)第十二章

一、习题介绍 第十二章 Check Point:P454 12.1,12.9,12.10,12,12 二、习题及答案 12.1 What is the advantage of using exception handling? 12.1使用异常处理的优势是什么? 答:使用异常处理有以下优势: 1. 提高…

浙江建筑安全员A证2024年最新考试题库练习

46.总承包单位依法将建设工程分包给其他单位的,分包合同中应当明确各自的安全生产方面的权利、义务。总承包单位对分包工程的安全生产承担()责任。 A.全部 B.主要 C.部分 D.连带 答案:D 47.实施总承报的建设工程发生事故&…

一首歌的时间 写成永远

大家好,我是秋意零。 就在,2024年6月20日。我本科毕业了,之前专科毕业挺有感触,也写了一篇文章进行记录。如今又毕业了,还是写一篇文章记录吧!! 专科毕业总结:大学三年总结&#xf…

编译原理1

NFA&DFA 在正规式的等价证明可以借助正规集,也可以通过有限自动机DFA来证明等价,以下例题是针对DFA证明正规式的等价,主要步骤是①NFA;②状态转换表; ③状态转换矩阵; ④化简DFA; 文法和语…

【关于C/C++中的scanf不能使用问题】

方法1:scanf_s 方法2:看见后面的日志了吗 CRT……?在第一行加上#define 日志 方法3:#pragma warning(disable:4996) 4996是我们的报错序号

B站、小红书崩,原因竟然是...它

B站崩!小红书崩! 大家好,我是那个在B站和小红书崩溃时,还在试图刷新页面的技术博主。到底是怎么一回事儿?今天,让我们一起来‘挖掘’这场技术‘灾难’的真相。 上午 10 点左右,微信技术群里突…

西南交通大学【算法分析与设计实验1】

实验1.4 有向图拓扑排序 实验目的 (1)掌握算法的自然语言描述法,流程图绘制方法以及伪代码描述方法。 (2)理解算法的执行过程。 (3)掌握算法的编程实现方法、调试方法及测试方法。 实验任务…

JSON JOLT常用示例整理

JSON JOLT常用示例整理 1、什么是jolt Jolt是用Java编写的JSON到JSON转换库,其中指示如何转换的"specification"本身就是一个JSON文档。以下文档中,我统一以 Spec 代替如何转换的"specification"json文档。以LHS(left hand side)代…

【AIGC X UML 落地】从UML语句到UML图形的生成,来看Agent插件的制作

上篇我们讲到如何通过多智能体实现自然语言绘制UML图。 没有看过的,可以去看下原文:《【AIGC X UML 落地】通过多智能体实现自然语言绘制UML图》 其中有一个实现重点,就是如何将 PlantUML 语句生成 UML 图片。在这里笔者是通过自定义 Agent 插件来实现这一流程。 本文,就此…

disql使用

进入bin目录:cd /opt/dmdbms/bin 启动disql:./disql,然后输入用户名、密码 sh文件直接使用disql: 临时添加路径到PATH环境变量:在当前会话中临时使用disql命令而无需每次都写完整路径,可以在执行脚本之前…

在非 antd pro 项目中使用 umi OpenAPI

大家好,我是松柏。自从跟着鱼皮哥使用了ant design pro中的OpenAPI插件之后,我已经无法忍受自己写请求后端接口的方法了,所以这篇文章记录一下如何在非ant design pro项目中使用OpenAPI。 安装依赖 首先我们需要安装包umijs/openapi&#x…