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

问题：

//此文件时项目导航栏，不属于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时告诉状态管理路由变化了，然后我们再去状态管理中取得变化的值