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

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。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Kafka~消息发送过程与ISR机制了解

消息发送过程 使用Kafka发送消息时,一般有两种方式分别是: 同步发送异步发送 同步发送时,可以在发送消息后,通过get方法等待消息结果,这种情况能够准确的拿到消息最终的发送结果,要么是成功、要么是失败…

前端路由管理

前端路由管理简介: 当谈到前端路由管理时,通常指的是在单页面应用程序(SPA)中管理页面间导航和URL的过程。路由管理器是一个工具,可以帮助前端开发者定义应用程序的不同视图之间的关系,同时能够响应URL的改…

Attention (注意力机制)

1. 背景: 字面的意思:给你一些东西(看见一个美女:).....),你会注意什么? 大数据的时代下,有太多的数据,我们又该如何选择重要的数据呢? Attention 诞生了,但是又该如何去做呢(i.e., …

springboot在线考试 LW +PPT+源码+讲解

第三章 系统分析 3.1 可行性分析 一个完整的系统,可行性分析是必须要有的,因为他关系到系统生存问题,对开发的意义进行分析,能否通过本系统来补充线下在线考试管理模式中的缺限,去解决其中的不足等,通过对…

[OtterCTF 2018]Play Time

还是这个程序 。。要找到游戏名字查看 进程 psscan pstree pslist 0x000000007d686b30 Rick And Morty 3820 2728 0x000000000b59a000 2018-08-04 19:32:55 UTC0000 0x000000007d7cb740 LunarMS.exe 708 2728 0x00000000731cb000 2018-08-04 19:27:39 UTC0000…

嵌入式Linux系统编程 — 4.7 regcomp、regexec、regfree正则表达式函数

目录 1 为什么需要正则表达式 2 正则表达式简介 3 正则表达式规则 4 regcomp、regexec、regfree函数 4.1 函数介绍 4.2 URL格式案例 1 为什么需要正则表达式 在许多的应用程序当中, 有这样的应用场景: 给定一个字符串,检查该字符串是否…

Spring学习01-[Spring实现IOC的几种方式]

Spring实现IOC的几种方式 基于xml实现Spring的IOC基于注解实现Spring的IOC基于JavaConfig实现的Spring的IOC基于SpringBoot实现Spring的IOC 基于xml实现Spring的IOC 引入spring核心依赖 <!--spring核心容器--><dependency><groupId>org.springframework<…

14 卡尔曼滤波及代码实现

文章目录 14 卡尔曼滤波及代码实现14.0 基本概念14.1 公式推导14.2 代码实现 14 卡尔曼滤波及代码实现 14.0 基本概念 卡尔曼滤波是一种利用线性系统状态方程&#xff0c;通过系统输入输出观测数据&#xff0c;对系统状态进行最优估计的算法。由于观测数据包括系统中的噪声和…

【智能制造-4】机器人控制器

机器人控制器中分哪几个模块&#xff1f; 机器人控制器通常由以下几个主要模块组成: 运动控制模块: 负责机器人各轴电机的位置、速度、加速度等控制 实现机器人末端执行器的精确定位和运动控制传感器接口模块: 负责机器人各种传感器信号的采集和处理 为运动控制、环境感知等提…

实用的vueuseHooks,提高编码效率

文章目录 写在前面vueuse 官网安装HooksuseStorage [地址](https://vueuse.org/core/useStorage/)传统方法数据持久化 举例子传统持久化的弊端useStorage 数据持久化 举例子使用useStorage 更改存储数据使用useStorage 删除存储数据 useScriptTag [地址](https://vueuse.org/co…

Detailed Steps for Troubleshooting ORA-00600 [kdsgrp1] (文档 ID 1492150.1)

Detailed Steps for Troubleshooting ORA-00600 [kdsgrp1] (文档 ID 1492150.1)​编辑转到底部 In this Document Purpose Troubleshooting Steps References APPLIES TO: Oracle Database - Enterprise Edition Oracle Database Cloud Schema Service - Version N/A and lat…

鸿蒙开发Ability Kit(程序框架服务):【选择申请权限的方式】

选择申请权限的方式 应用在访问数据或者执行操作时&#xff0c;需要评估该行为是否需要应用具备相关的权限。如果确认需要目标权限&#xff0c;则需要在应用安装包中申请目标权限。 每一个权限的权限等级、授权方式不同&#xff0c;申请权限的方式也不同&#xff0c;开发者在…

41割队伍

上海市计算机学会竞赛平台 | YACSYACS 是由上海市计算机学会于2019年发起的活动,旨在激发青少年对学习人工智能与算法设计的热情与兴趣,提升青少年科学素养,引导青少年投身创新发现和科研实践活动。https://www.iai.sh.cn/problem/387 题目描述 给定 𝑛n 个数字 𝑎1,�…

MySQL高级-MVCC-基本概念(当前读、快照读)

文章目录 1、MVCC基本概念1.1、当前读1.1.1、创建表 stu1.1.2、测试 1.2、快照读 1、MVCC基本概念 全称Multi-Version Concurrency Control&#xff0c;多版本并发控制。指维护一个数据的多个版本&#xff0c;使得读写操作没有冲突&#xff0c;快照读为MySQL实现MVCC提供了一个…

网易云音乐数据爬取与可视化分析系统

摘要 本系统采用Python语言&#xff0c;基于网易云音乐&#xff0c;通过数据挖掘技术对该平台的音乐数据进行了深入的研究和分析&#xff0c;旨在挖掘出音乐市场的规律&#xff0c;为音乐人、唱片公司、音乐爱好者等提供数据支持。系统的开发意义在于&#xff1a;一方面为音乐…

flink 处理函数和流转换

目录 处理函数分类 概览介绍 KeydProcessFunction和ProcessFunction 定时器TimeService 窗口处理函数 多流转换 分流-侧输出流 合流 联合&#xff08;Uniion&#xff09; 连接&#xff08;connect&#xff09; 广播连接流&#xff08;BroadcatConnectedStream&#xf…

大模型微调实战之基于星火大模型的群聊对话分角色要素提取挑战赛:Task01:跑通Baseline

目录 0 背景1 环境配置1.1 下载包1.2 配置密钥1.3 测试模型 2 解决问题2.1 获取数据2.2 设计Prompt2.2 设计处理函数2.3 开始提取 附全流程代码 0 背景 Datawhale AI夏令营第二期开始啦&#xff0c;去年有幸参与过第一期&#xff0c;收获很多&#xff0c;这次也立马参与了第二…

昇思MindSpore学习笔记5--数据变换Transforms

摘要&#xff1a; 昇思MindSpore的数据变换&#xff0c;包括通用变换Common Transforms、图像变换Vision Transforms、标准化Normalize、文本变换Text Transforms、匿名函数变换Lambda Transforms。 一、数据变换Transforms概念 原始数据需预处理后才能送入神经网络进行训练…

【网络】计算机网络-基本知识

目录 概念计算机网络功能计算机网络的组成计算机网络的分类 网络地址网络地址的分类 计算机网络相关性能指标速率带宽吞吐量时延时延的种类&#xff1a; 时延带宽积往返时延RTT利用率 概念 计算机网络是指将多台计算机通过通信设备连接起来&#xff0c;实现数据和资源的共享。…

spring mvc实现一个自定义Formatter请求参数格式化

使用场景 在Spring Boot应用中&#xff0c;Formatter接口用于自定义数据的格式化&#xff0c;比如将日期对象格式化为字符串&#xff0c;或者将字符串解析回日期对象。这在处理HTTP请求和响应时特别有用&#xff0c;尤其是在展示给用户或从用户接收特定格式的数据时。下面通过…