背景:路由結構/video/1.mp4,即/video是父路由,/1.mp4是/video的動態子路由,在/video父路由中會通過url的params獲取視頻信息,即通過/1.mp4獲取對應的視頻完整信息,然後通過props傳到動態子路由中,然後子路由通過接受到的視頻對象,進行展示
問題:當路由切換時,即當我點擊其他視頻時,導致動態子路由變化時,我監聽了/video父路由的變化並重新根據url的params獲取視頻對象,並自動通過props傳入子路由中,我在子路由中通過watch 視頻對象來進行一些操作,結果
watch: {
video () {
console.log("test")
}
}
test被打印了兩次,通過一番查找,才發現,當子路由切換時,父路由/video中的data數據都會被初始化爲默認值,所以導致video對象變化了兩次,一次是因爲初始化被重置爲默認值空對象,一次是請求後的正確數據
結局: 將video對象存到vuex中,然後父路由將vuex中的video對象傳給子路由就行了