router.currentRoute zeigt eine andere Route an als router.currentRoute.value
P粉724256860
P粉724256860 2024-03-25 23:56:08
0
1
497

Ich versuche, die aktuelle Route einer Komponente abzurufen, aber router.currentRoute zeigt ein seltsames Verhalten.

router.currentRoute 显示预期路由 /admin Erwartete Route anzeigen /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

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

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

Daher kann ich router.currentRoute.value.path nicht verwenden, um die aktuelle Route anzuzeigen. Ist dieses Verhalten zu erwarten? Wie erhalte ich die aktuelle Route einer Komponente?

P粉724256860
P粉724256860

Antworte allen(1)
P粉317679342

从格式来看,您似乎正在使用 console.log (或类似)API 来观察代码效果。

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

检查此示例(大致遵循Vue Router 使用的数据结构)

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

结果:router.currentRoute 的每个日志显示完全相同的值(与 router.currentRoute.value 的日志相反)

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

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

要解决此问题,请使用 console.log(JSON.parse(JSON.stringify(obj))) 代替...

Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage