router.currentRoute memaparkan laluan yang berbeza daripada router.currentRoute.value

Question

Saya cuba mendapatkan laluan semasa komponen tetapi router.currentRoute menunjukkan beberapa kelakuan pelik.

router.currentRoute 显示预期路由 /admin Tunjukkan laluan yang dijangkakan /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

Tetapi router.currentRoute.value 显示路由 /:

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

Jadi saya tidak boleh menggunakan router.currentRoute.value.path untuk menunjukkan laluan semasa. Adakah tingkah laku ini dijangka? Bagaimana untuk mendapatkan laluan semasa komponen?

Answer 1

Daripada format, nampaknya anda menggunakan console.log (atau serupa) API untuk memerhati kesan kod.

Sila ambil perhatian bahawa hampir semua pelayar moden memaparkan pandangan "malas" objek dalam konsol (semasa log objek)

Semak contoh ini (kira-kira mengikut struktur data yang digunakan oleh Vue Router)

1. Contoh terbuka
2. Buka Alat Pembangunan - Konsol
3. Klik butang dua kali atau lebih
4. Temui nilai yang direkodkan sekarang

Keputusan: router.currentRoute 的每个日志显示完全相同的值（与 router.currentRoute.value log adalah bertentangan)

Sekarang cuba perkara yang sama tetapi kembangkan objek yang dirakam selepas setiap klik...

TL:DR Jangan percaya konsol! - Nilai yang anda lihat tidak semestinya nilai objek apabila console.log dilaksanakan.

Untuk membetulkannya, gunakan console.log(JSON.parse(JSON.stringify(obj))) sebaliknya...