我正在尝试获取组件的当前路由,但 router.currentRoute
显示出一些奇怪的行为。
router.currentRoute
显示预期路由 /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
但是 router.currentRoute.value
显示路由 /
:
{path: '/', name: undefined, params: {…}, query: {…}, hash: '', …} fullPath: "/" hash: "" matched: [] meta: {} name: undefined params: {} path: "/" query: {} redirectedFrom: undefined [[Prototype]]: Object
因此我无法使用 router.currentRoute.value.path
来显示当前路由。这种行为是预期的吗?如何获取组件当前的路由?
从格式来看,您似乎正在使用
console.log
(或类似)API 来观察代码效果。请注意,几乎所有现代浏览器在控制台中显示的是对象的“惰性”视图(记录对象时)
检查此示例(大致遵循Vue Router 使用的数据结构)
结果:
router.currentRoute
的每个日志显示完全相同的值(与router.currentRoute.value
的日志相反)现在尝试相同的操作,但每次单击后展开记录的对象...
TL:DR 不要相信控制台! - 您看到的值不一定是执行
console.log
时对象的值。要解决此问题,请使用
console.log(JSON.parse(JSON.stringify(obj)))
代替...