vue單頁面條件下添加類似瀏覽器的標簽頁切換功能
阿新 • • 發佈:2017-09-13
mage destroy troy 應用 -1 不知道 同學 his image
在用vue開發的時候,單頁面應用程序,而又有標簽頁這種需求,各種方式實現不了,
從這個
到這個,然後再返回上面那個
因為每個標簽頁的route不一樣,導致組件重新渲染的問題,怎麽都不知道如何實現.........
簡直郁悶到爆炸,後來和同學談起的時候,說起生命周期這個才恍然大悟,
對於vue的生命周期,因為用的少,本身多用的是created,mounted這兩個,都忘記beforeDestroy這些了,然後抓瞎了好久
實現方式是
每次銷毀組件之前 緩存數據 能夠用到的是 this.$data
this.$data是這整個組件的數據
beforeDestroy(){
//用的是vuex,其他sessionStorage什麽的也行
this.$store.dispatch(‘updateDate‘,this.$data )
}
然後組件創建時候
created(){
if(this.$store.getters.pageData){
Object.keys(this.$data).forEach(k=>{
this.$data[ k ]=this.$store.getters.pageData[ k ];//整個時候不能整個直接一起賦值,會報錯;
})
}
}
vue單頁面條件下添加類似瀏覽器的標簽頁切換功能