router.currentRoute 显示的路线与 router.currentRoute.value 不同

Question

我正在尝试获取组件的当前路由，但 router.currentRoute 显示出一些奇怪的行为。

router.currentRoute 显示预期路线 /admin:

RefImpl {__v_isShallow: true, dep: undefined, __v_isRef: true, _rawValue: {…}, _value: {…}}
dep: Set(1) {ReactiveEffect}
__v_isRef: true
__v_isShallow: true
_rawValue: {fullPath: '/admin', path: '/admin', query: {…}, hash: '', name: 'login', …}
_value: {fullPath: '/admin', path: '/admin', query: {…}, hash: '', name: 'login', …}
value: Object
    fullPath: "/admin"
    hash: ""
    href: "/admin"
    matched: [{…}]
    meta: {}
    name: "login"
    params: {}
    path: "/admin"
    query: {}
    redirectedFrom: undefined
    [[Prototype]]: Object
[[Prototype]]: Object

但 router.currentRoute.value 显示路线 /:

{path: '/', name: undefined, params: {…}, query: {…}, hash: '', …}
fullPath: "/"
hash: ""
matched: []
meta: {}
name: undefined
params: {}
path: "/"
query: {}
redirectedFrom: undefined
[[Prototype]]: Object

因此我不能使用 router.currentRoute.value.path 应该显示当前路线。这种行为是预期的吗？如何获取组件的当前路由？

Answer 1

根据格式，您似乎正在使用 console.log（或类似的）API 来观察代码效果。

请注意，几乎所有现代浏览器在控制台中显示的都是对象的“惰性”视图（在记录对象时）

检查this example（大致遵循Vue Router使用的数据结构）

打开例子
打开开发工具 - 控制台
点击按钮两次或更多次
现在才探索记录的值

结果：router.currentRoute 的每个日志显示完全相同的值（与 router.currentRoute.value 的日志相反）

现在尝试同样的操作，但每次单击后展开记录的对象...

TL:DR 不要相信控制台！ - 您看到的值不一定是执行 console.log 时对象的值。

要解决此问题，请改用 console.log(JSON.parse(JSON.stringify(obj)))...

router.currentRoute 显示的路线与 router.currentRoute.value 不同

router.currentRoute is showing different route than router.currentRoute.value

vue.js

vue-router

vuejs3