在vue3中，为什么router.currentRoute和router.currentRoute.value打印的值不同？

Question

当我使用该地址进入/npc页面或者在/npc页面刷新页面时，遇到以下情况。

代码：

router.beforeEach(async () => {
  console.log(router.currentRoute, router.currentRoute.value)
})

输出：

Ref有价值，为什么不直接打印呢？

我试图弄清楚发生了什么以及为什么会发生。

Answer 1

当您展开已控制台记录的对象的属性时，它将向您显示实时（当前）值，而不是在准确记录时实际可能存在的值。 请参阅有关 使用 console.log 记录对象的 MDN 文档

正如文档所建议的，解决方法是在记录之前深度克隆对象。 对于你的情况：

console.log(
  JSON.parse(JSON.stringify(router.currentRoute)),
  JSON.parse(JSON.stringify(router.currentRoute.value))
)

这应该显示相同的值。

仅供参考，您没有提到为什么要在导航守卫内记录

router.currentRoute

，但通常在守卫内您对“从”路线和“到”路线感兴趣，这两个路线都提供了为您提供参数。

router.beforeEach(async (to, from) => {
  console.log(from)
})

这为您提供了相同的信息，而无需担心控制台中的值发生变化。

参见

Vue Router 文档