我正在嘗試獲取元件的當前路由,但 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)))
取代...