vue3获取当前路由为什么一直是 / ?

最新推荐文章于 2024-04-16 11:08:36 发布

我叫汪枫

最新推荐文章于 2024-04-16 11:08:36 发布

阅读量470

点赞数 3

文章标签：前端 vue.js

本文链接：https://blog.csdn.net/weixin_47121832/article/details/137694939

版权

今天在写项目的时候，我想获取到当前的路由去做路由的匹配，我靠，不知道抽什么风一直获取的路由是 /

最搞笑的是gpt都不明白问题出在哪里，经过一顿百度，最终发现问题如下：

router给fullPath赋值是微任务，那么只需要通过宏任务获取fullPath就可以了

onMounted(() => {
  setTimeout(() => {
    console.log(router.currentRoute.value.fullPath);
  }, 0);
});

这就需要恶补一下基础了！

在 JavaScript 中，事件循环（Event Loop）是管理异步任务执行的机制。在事件循环中，任务被分为宏任务（macro-task）和微任务（micro-task），它们在不同的阶段被执行。

**宏任务（Macro-task）：**宏任务包括整体代码块、setTimeout、setInterval、setImmediate（Node.js 中的特殊情况）、I/O 操作等。在每一次事件循环中，宏任务队列中的任务会按照顺序执行，执行完一个宏任务后，会检查微任务队列是否为空，如果不为空，则依次执行微任务队列中的任务。当微任务队列为空时，会开始执行下一个宏任务。
**微任务（Micro-task）：**微任务包括 Promise 的回调函数、MutationObserver 的回调函数等。在每一个宏任务执行完之后，会立即执行微任务队列中的所有任务，直到微任务队列为空。微任务执行完毕后，会继续执行下一个宏任务。

具体的执行过程可以概括为以下步骤：

因此，微任务会在当前宏任务执行完毕后立即执行，而宏任务则会在下一个事件循环中执行。这就是为什么使用 setTimeout(callback, 0) 可以将任务放到宏任务队列中，以确保在当前事件循环中其他任务执行完毕后再执行。

关注