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?
从格式来看,您似乎正在使用
console.log
(或类似)API 来观察代码效果。请注意,几乎所有现代浏览器在控制台中显示的是对象的“惰性”视图(记录对象时)
检查此示例(大致遵循Vue Router 使用的数据结构)
结果:
router.currentRoute
的每个日志显示完全相同的值(与router.currentRoute.value
的日志相反)现在尝试相同的操作,但每次单击后展开记录的对象...
TL:DR 不要相信控制台! - 您看到的值不一定是执行
console.log
时对象的值。要解决此问题,请使用
console.log(JSON.parse(JSON.stringify(obj)))
代替...