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

router.currentRoute shows the 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 shows route /:

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

hence I can't use router.currentRoute.value.path which should show the current route. Is this behaviour expected? How do I get the current route of the component?

CodePudding user response：

Given by the formatting it seems you are using console.log (or similar) API to observe the code effects.

Note that what almost all modern browsers shows in the console is the "lazy" view of the object (when logging objects)

Check this example (which roughly follows the data structures used by Vue Router)

1. Open example
2. Open Dev Tools - Console
3. Click the button twice or more
4. Only now explore the logged values

Result: Each log of router.currentRoute shows exactly same value (opposed to logs of router.currentRoute.value)

Now try the same thing but unfold the logged object after each click...

TL:DR Do not trust the console! - the value you see is not necessarily the value of the object at the time console.log was executed.

To workaround the issue use console.log(JSON.parse(JSON.stringify(obj))) instead...