router.currentRoute affiche un itinéraire différent de router.currentRoute.value

Question

J'essaie d'obtenir l'itinéraire actuel d'un composant mais router.currentRoute montre un comportement étrange.

router.currentRoute 显示预期路由 /admin Afficher l'itinéraire attendu /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

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

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

Je ne peux donc pas utiliser router.currentRoute.value.path pour afficher l'itinéraire actuel. Ce comportement est-il attendu ? Comment obtenir le parcours actuel d'un composant ?

Answer 1

D'après le format, il semble que vous utilisez l'API console.log (ou similaire) pour observer les effets du code.

Veuillez noter que presque tous les navigateurs modernes affichent une vue "paresseuse" de l'objet dans la console (lors de la journalisation de l'objet)

Vérifiez cet exemple (suit à peu près la structure de données utilisée par Vue Router)

1. Exemple ouvert
2. Outils de développement ouverts - Console
3. Cliquez sur le bouton deux fois ou plus
4. Découvrez la valeur enregistrée maintenant

Résultat : le journal de router.currentRoute 的每个日志显示完全相同的值（与 router.currentRoute.value est ci-contre)

Maintenant, essayez la même chose mais agrandissez l'objet enregistré après chaque clic...

TL:DR Ne faites pas confiance à la console ! - La valeur que vous voyez n'est pas nécessairement la valeur de l'objet lorsque console.log est exécuté.

Pour résoudre ce problème, utilisez plutôt console.log(JSON.parse(JSON.stringify(obj)))...