router.currentRoute displays a different route than router.currentRoute.value

Question

I'm trying to get the current route of a component, but router.currentRoute is showing some weird behavior.

router.currentRoute Show expected route /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

But router.currentRoute.value Show route /:

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

So I can't use router.currentRoute.value.path to display the current route. Is this behavior expected? How to get the current route of a component?

Answer 1

Judging from the format, it seems that you are using the console.log (or similar) API to observe the code effects.

Please note that almost all modern browsers display a "lazy" view of the object in the console (when logging the object)

Check out This example (roughly follows the data structure used by Vue Router)

1. Open example
2. Open Development Tools - Console
3. Click the button twice or more
4. Explore the recorded value now

Result: Every log for router.currentRoute shows the exact same value (as opposed to the log for router.currentRoute.value)

Now try the same thing but expand the recorded object after each click...

TL:DR Don't trust the console! - The value you see is not necessarily the value of the object when console.log is executed.

To resolve this issue, use console.log(JSON.parse(JSON.stringify(obj))) instead of...