刷新vue项目后,在非routerview中的组件获取路由路径永远是“/“的解决方案

news2024/11/24 6:56:58

问题:

//此文件时项目导航栏,不属于router-view的内容
//route.fullPath表示当前的页面路径
	onMounted(() => {
		setTimeout(() => {
			console.log("100ms________", route.fullPath);
		}, 100);
		setTimeout(() => {
			console.log("500ms________", route.fullPath);
		}, 500);
		setTimeout(() => {
			console.log("1000ms_____", route.fullPath);
		}, 1000);
	});

在这里插入图片描述

原因:

可以看到,在页面刷新后,我当前页面明显是"/bolg",但是在500ms之前的打印都是"/"路径,之所以出现这种问题:一方面是我的项目设置了路由跳转动画,另一方面是宏任务与微任务导致的
路由跳转动画原因:每次进入页面前有个400m的动画时长,因此很导致500m前都获取不到路由地址
宏任务与微任务:看了一些相关资料,表示非路由组件(基本就是侧边栏),有的说是组件dom的原因,有的说是宏任务与微任务的原因,我个人感觉是任务队列的可能性大一些,毕竟我的导航栏不受路由控制,肯定会在路由加载前进行加载的

解决方案:

1、利用vue的监听属性或者计算属性,监听route.path的变化,我们只需要拿到变化后的值就行了

	import { computed } from "vue";
	import { useRoute } from "vue-router";
	const route= useRoute();
	//利用计算属性,此时routePath永远表示当前的路由地址
	const routePath= computed(() => {
		return route.path;
	});

2、梭哈,直接window.location.href,我不管你是什么花里胡哨的,直接打印浏览器信息(强烈推荐)

import { onMounted } from "vue";

onMounted(() => {
		console.log(window.location.href);
	});

3、利用vuex或者pinia,这里就不做描述了,很麻烦,需要在beforeEach时告诉状态管理路由变化了,然后我们再去状态管理中取得变化的值

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

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

相关文章

Comparator.comparing()实现中文排序及空指针处理

一、 Comparator.comparing()的用法请详见以下上一篇文章的汇总介绍。 Comparator用法_乞力马扎罗の黎明的博客-CSDN博客 二、应用示例: 1、中文排序、空值处理 Collator instance Collator.getInstance(Locale.CHINA); checkItemVoList.stream().sorted(Compar…

微服务保护——Sentinel【快速入门】

一、雪崩问题🍉 (一) 什么是雪崩🥝 微服务调用链路中的某个服务故障,引起整个链路中的所有微服务都不可用,这就是雪崩。服务D故障引起服务A故障,服务A引起其他服务故障,渐渐导致所有微服务都不可用。有人…

【深入探究人工智能】:历史、应用、技术与未来

深入探究人工智能 前言人工智能的历史人工智能的应用人工智能的技术人工智能的未来当代的人工智能产物结语🍀小结🍀 🎉博客主页:小智_x0___0x_ 🎉欢迎关注:👍点赞🙌收藏✍️留言 &am…

Linux云服务器,docker compose文件部署多个jar,docker部署多模块boot项目

前提条件 Linux服务器 服务器已经安装docker docker已经安装jdk镜像 docker已经安装mysql镜像 将要部署的项目的jar包打包好,项目是多模块springboot项目 部署过程 项目是3个模块的Spring boot项目,打出来3个jar,将这些jar包拷贝到…

小米手把手教你轻松搞定复杂需求!聊聊商家与店铺的关系优化方案

大家好,我是小米!今天要和大家分享一次与产品大佬张小姐的有趣对话和我所面对的一项“小需求”。废话不多说,让我们一起来看看如何应对这个需求挑战吧! 系统现状 在开始之前,先让我们简单回顾一下目前系统的现有功能…

echarts实现渐变折线图并添加点击事件

折线图点击事件代码: let myChart = this.$echarts.init(document.getElementById(trendBoxECharts))myChart.getZr().on(click, params => {console.log(params)let pointInPixel = [params.offsetX, params.offsetY]if (myChart.containPixel(grid, pointInPixel)) {//点…

云迁移第二波热潮来袭,你准备好了吗?

最近,云迁移再次被频繁提及,企业对云迁移的需求量有回升趋势,究其根本,主要有以下原因: 企业数字化进程加速,本地上云需求强劲 根据《2021中国企业上云指数洞察报告》,我国实体经济上云渗透率…

vue 当新增样式无法生效的情况下如何处理

使用scoped属性时&#xff0c;会遇到样式问题。需要使用样式穿透解决 <style lang"scss" scoped> </style> 可以使用以下方法 &#xff1a;deep css 使用 >>> less 使用 /deep/ scss 使用 ::v-deep 代码写法如下: .a :deep(.b) { } .…

Word文档突然无法打开?如何修复损坏文档?

在工作学习中&#xff0c;通常会遇到这种情况&#xff0c;我们正在编辑Word文件&#xff0c;电脑忽然断电关机&#xff0c;或者死机需要重启。当电脑重启以后&#xff0c;辛辛苦苦编辑很久的Word文件却忽然打不开了&#xff01;一直提示文件错误&#xff0c;如何解决Word无法打…

第五章运输层

1.运输层概述 之前课程所介绍的计算机网络体系结构中的物理层、数据链路层以及网络层它们共同解决了将主机通过异构网络互联起来所面临的问题&#xff0c;实现了主机到主机的通信。 但实际上在计算机网络中进行通信的真正实体是位于通信两端主机中的进程。 如何为运行在不同主…

CS 144 Lab Two -- TCPReceiver

CS 144 Lab Two -- TCPReceiver TCPReceiver 简述索引转换TCPReceiver 实现 测试 对应课程视频: 【计算机网络】 斯坦福大学CS144课程 Lab Two 对应的PDF: Lab Checkpoint 2: the TCP receiver TCPReceiver 简述 在 Lab2&#xff0c;我们将实现一个 TCPReceiver&#xff0c;用…

AI读心术:情感分析和数据标注的奥秘

情感分析也被称为情感分类&#xff0c;意图挖掘&#xff1b;是让机器去辨别和理解人类的情感语言文本的技术。互联网技术发展至今&#xff0c;人人都和手机形影不离&#xff0c;任何消费行为、生活休闲、美食评论、旅行决策都可以通过网络的连接让信息共享和公开。商家也利用这…

C++第四讲

思维导图 仿照string类&#xff0c;实现myString类 /* ---------------------------------author&#xff1a;YoungZorncreated on 2023/7/19 19:20.--------------------------------- */ #include<iostream> #include<cstring>using namespace std;class myStri…

每天一点Python——day58

#第五十八天 集合间的关系&#xff1a; 类似于数学中学到的集合一样&#xff0c;关系差不多&#xff0c;譬如相等&#xff0c;子集&#xff0c;交集 如图所示&#xff1a;#①两个集合是否相等&#xff1a;运用运算符【等号】或者运算符&#xff01;【不等号】进行判断 #例&…

如何生成一个漂亮的allure测试报告

前言 今天给大伙展示一下如何生成一个漂亮的allure测试报告&#xff0c;同时呢希望能帮助到大家。 定制化后的allure测试报告效果展示 如何定制化输出锦上添花的allure测试报告 使用前&#xff0c;先导入allure模块。 import allure 使用前&#xff0c;先熟悉运行测试用例…

【C++】STL---vector基本用法介绍

个人主页&#xff1a;平行线也会相交&#x1f4aa; 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 平行线也会相交 原创 收录于专栏【C之路】&#x1f48c; 本专栏旨在记录C的学习路线&#xff0c;望对大家有所帮助&#x1f647;‍ 希望我们一起努力、成长&…

异步任务——CompletabelFuture

本专栏学习内容又是来自尚硅谷周阳老师的视频 有兴趣的小伙伴可以点击视频地址观看 在学习CompletableFuture之前&#xff0c;必须要先了解一下Future Future 概念 Future接口&#xff08;FutureTask实现类&#xff09;定义了操作异步任务执行的一些方法&#xff0c;如获取异…

编写测试用例的方法,这个是真的很好用

大家测试过程中经常用的等价类划分、边界值分析、场景法等&#xff0c;并不能覆盖所有的需求&#xff0c;我们之前讲过很少用到的因果图法&#xff0c;下面就来讲另一种不经常用到但又非常重要的测试用例编写方法——测试大纲法。 测试大纲法适用于有多个窗口&#xff0c;每个…

Mysql下载详细步骤

一、下载mysql 打开地址&#xff1a;MySQL :: Download MySQL Community Server 这里我下载的是红框标注的。 直接点击No thanks,just start my download.解压后文件看自己需求放置。 红框圈住的文件都是后面自己添加的。 my文件中需要添加的文本内容。 [mysqld] #设置3306端口…

【conan】本地编译三方库,上传conan服务器

1.6 conan 远程已经编译好的库 conan中文博客&#xff1a; 三方库资源&#xff1a; github conan-io 本地查询 conan search Existing package recipes:b2/4.9.6 boost/1.71.0nolovr/stable bzip2/1.0.8 ceres-solver/2.0.0nolovr/stable eigen/3.3.7nolovr/stable eigen_c…