問題
最近些日子項(xiàng)目中突然碰到了一個(gè)需求撒顿，再完成編輯操作之后需要進(jìn)行頁(yè)面刷新慢显，通過實(shí)驗(yàn)有如下幾種姿勢(shì)可以解決需求中的問題持际，下面進(jìn)行簡(jiǎn)單總結(jié)如下突想。
姿勢(shì)一：this.$router.go(0)
這個(gè)姿勢(shì)是利用了 history 中前進(jìn)和后退的功能殴蹄，傳入 0 刷新當(dāng)前頁(yè)面。但是有一個(gè)問題就是頁(yè)面整個(gè)刷新過程中會(huì)白屏猾担，嚴(yán)重影響用戶的體驗(yàn)感袭灯，效果不好。
this.$router.go(0)
姿勢(shì)二：location.reload()
這個(gè)姿勢(shì)是利用了直接使用刷新當(dāng)前頁(yè)面的方法绑嘹。但是同樣存在有一個(gè)問題就是頁(yè)面整個(gè)刷新過程中會(huì)白屏稽荧，嚴(yán)重影響用戶的體驗(yàn)感，效果也是不好工腋，和姿勢(shì)一的現(xiàn)象一直姨丈，也不推薦使用。
location.reload()
姿勢(shì)三：provide / inject組合
允許一個(gè)祖先組件向其所有子孫后代注入一個(gè)依賴擅腰，不論組件層次有多深蟋恬，并在起上下游關(guān)系成立的時(shí)間里始終生效。
provide：選項(xiàng)應(yīng)該是一個(gè)對(duì)象或返回一個(gè)對(duì)象的函數(shù)趁冈。該對(duì)象包含可注入其子孫的屬性歼争。
inject：一個(gè)字符串?dāng)?shù)組，或一個(gè)對(duì)象渗勘，對(duì)象的 key 是本地的綁定名沐绒。
注意：provide和inject綁定并不是可響應(yīng)的。這是刻意為之的呀邢。如果你傳入了一個(gè)可監(jiān)聽的對(duì)象洒沦，那么其對(duì)象的屬性還是可響應(yīng)的。
基本使用步驟如下：
- 步驟一：（App.vue）
通過 $nextTick()价淌，協(xié)助實(shí)現(xiàn)申眼。先把 <router-view /> 移除瞒津，移除后再重新添加，達(dá)到刷新當(dāng)前頁(yè)面的功能括尸。是目前最合適的實(shí)現(xiàn)方式巷蚪。<template> <div id="app"> <router-view v-if="isRouterAlive"/> </div> </template> <script> export default { name: 'App', provide () { return{ reload: this.reload } }, data() { return { isRouterAlive: true } }, methods:{ reload(){ this.isRouterAlive = false this.$nextTick(function(){ this.isRouterAlive = true }) } } } </script>
- 步驟二：（chapter.vue）
inject: ['reload'],代碼結(jié)構(gòu)
- 步驟三：（chapter.vue）
直接this.reload()調(diào)用，即可刷新當(dāng)前頁(yè)面濒翻。this.reload()// 需要刷新頁(yè)面代碼結(jié)構(gòu)
結(jié)束語(yǔ)
到此問題解決屁柏，不多說了，抽根煙有送，解心寬淌喻，繼續(xù)寫代碼了....
