我正在嘗試獲取元件的當(dāng)前路由,但 router.currentRoute
顯示出一些奇怪的行為。
router.currentRoute
顯示預(yù)期路由 /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
因此我無(wú)法使用 router.currentRoute.value.path
來(lái)顯示目前路由。這種行為是預(yù)期的嗎?如何取得組件目前的路由?
從格式來(lái)看,您似乎正在使用 console.log
(或類似)API 來(lái)觀察程式碼效果。
請(qǐng)注意,幾乎所有現(xiàn)代瀏覽器在控制臺(tái)中顯示的是物件的「惰性」視圖(記錄物件時(shí))
檢查此範(fàn)例(大致遵循Vue Router 使用的資料結(jié)構(gòu))
結(jié)果:router.currentRoute
的每個(gè)日誌顯示完全相同的值(與 router.currentRoute.value
的日誌相反)
現(xiàn)在嘗試相同的操作,但每次點(diǎn)擊後展開(kāi)記錄的物件...
TL:DR 不要相信控制臺(tái)! - 您看到的值不一定是執(zhí)行 console.log
時(shí)物件的值。
要解決此問(wèn)題,請(qǐng)使用 console.log(JSON.parse(JSON.stringify(obj)))
取代...