vue單頁快取存在的問題及解決方案

1.css同名覆蓋,解決方法：父元件加上scoped

子元件同名樣式加上deep

/deep/ .tabs-row 
.item 
}

2.事件全域性繫結

綁在window或document或body上的事件，切換到下乙個頁面同樣會被觸發，需要銷毀，也防止記憶體洩漏,全域性繫結的事件如果是公用元件慎用off().on(),因為可能引用的其他的元件全域性繫結的事件被移除

destroyed：

activated：被快取的頁面啟用，即返回時被觸發，created此時不會被觸發，重新繫結事件

activated () ,
destroyed () ,
deactivated () ,

3.音訊續播

deactivated () ,
methods: 
}

destroyed () ,
methods: 
this.$emit('callback', 'close')},}

activated () ,
methods: ,
}

5.router.aftereach裡上報pv時url未更新

var referrer = !from.name ? document.referrer :     
`$$` // 通過from.name判斷重新整理
var cururl = `$$` || ''

6.hash改變時並不會觸發router的守衛

**中通過hash改變，監聽hashchange來處理之後的邏輯，但是就不會觸發router的導航守衛，也就是沒有跳轉，就不存在單頁快取

window.location.hash = '#refer'

解決辦法：用replace替換url,相應的原來hashchange就不會監聽到，需要把這塊邏輯拿到created裡邊執行

this.$router.replace($#refer`})

7.分享問題修復

單頁快取導致返回時分享的鏈結和自定義文案沒有更新，針對特別處理的分享資料，在業務頁面修改，解決方法

activated () ,
methods: 
}

針對普通分享頁面,在router.aftereach裡加

router.aftereach((to, from) => } 
if (window.weixinjsbridge) 
else )}}
else $` })
} })
})

8.關注，收藏等toast提示在返回時未消失，因為延遲時間設定，解決方法：在路由鉤子裡邊強制隱藏

router.aftereach((to, from) => )

vue單頁應用頁面快取方案

首先我想到的是方案a 方案一 vue的keep alive元件具體使用如下這樣所有的頁面都會進行快取。包裹動態元件時，會快取不活動的元件例項，而不是銷毀它們。和相似，是乙個抽象元件它自身不會渲染乙個 dom 元素，也不會出現在父元件鏈中。當元件在內被切換，它的 activated 和 de...

Vue單頁及多頁應用全域性配置404頁面實踐記錄

無論單頁還是多頁，我的實現思路是總體配置404頁面的思路就是在前端路由表中新增乙個 path 404 的路由，渲染相應的404頁面。這篇文章主要介紹了vue單頁及多頁應用全域性配置404頁面實踐,需要的朋友可以參考下前後端分離後，控制路由跳轉的責任轉移到了前端，後端只負責給前端返回乙個html文件...

vue打包遇到的問題及解決

最近使用vue 框架做專案，遇到的問題在此記錄，僅供參考 1.1 build webpack.dev.conf.js devwebpackconfig.plugins 新增 new htmlwebpackplugin 1.2 build webpack.prod.conf.js webpackcon...

vue單頁快取存在的問題及解決方案

vue單頁應用頁面快取方案

Vue單頁及多頁應用全域性配置404頁面實踐記錄

vue打包遇到的問題及解決

相關推薦