詳解vue-router數(shù)據(jù)加載與緩存使用總結(jié)

之前開(kāi)發(fā)了一個(gè)單頁(yè)面應(yīng)用，按照深度，分為三層：目錄頁(yè)、一級(jí)子頁(yè)（標(biāo)簽頁(yè)、故事頁(yè)等）、二級(jí)子頁(yè)（故事編輯頁(yè)）。

這三類頁(yè)面都共享一個(gè)完整的數(shù)據(jù)model，從上級(jí)頁(yè)面進(jìn)入下一級(jí)頁(yè)面時(shí)，能夠加載相應(yīng)數(shù)據(jù)；回到上一級(jí)時(shí)，數(shù)據(jù)有更新。舉個(gè)栗子，從故事頁(yè)點(diǎn)擊“編輯”按鈕，進(jìn)入故事編輯頁(yè)則默認(rèn)填充點(diǎn)擊的“編輯”按鈕所對(duì)應(yīng)的故事數(shù)據(jù)；而當(dāng)在故事編輯頁(yè)更新數(shù)據(jù)，返回到故事頁(yè)時(shí)，剛剛更新的信息也能在故事頁(yè)展示。

對(duì)于這項(xiàng)需求，我們需要解決如下幾個(gè)問(wèn)題：

• 三層頁(yè)面共享數(shù)據(jù)；
• 進(jìn)入或退回當(dāng)前路由時(shí)，數(shù)據(jù)更新；
• 對(duì)于故事列表頁(yè)，返回時(shí)保留之前瀏覽位置；

本文后面內(nèi)容，將對(duì)如上問(wèn)題一一提出解決方案。

共享數(shù)據(jù)

多個(gè)路由共享數(shù)據(jù)，可以使用vuex做數(shù)據(jù)中心，由于需求對(duì)數(shù)據(jù)處理并不復(fù)雜，為了簡(jiǎn)便就使用window全局對(duì)象作為路由間傳遞數(shù)據(jù)的工具。
核心數(shù)據(jù)我們可以設(shè)計(jì)為如下結(jié)構(gòu)，以故事為例：

window.profileData = {
 storyList: [{
  content: 'xxx',
  type: 0,
  picList: [...],
 }, ...],
 description: {...}, // 其他字段數(shù)據(jù)
}

注意到，如果需要更新storyList，則應(yīng)該使用能夠被檢測(cè)到的方法，如push, splice等。

數(shù)據(jù)更新與緩存

數(shù)據(jù)更新與緩存大致有兩種方案：

第一種，利用vue-router的導(dǎo)航守衛(wèi)（見(jiàn)文檔：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html），主要使用路由組件內(nèi)導(dǎo)航 beforeRouteEnter 和 beforeRouteLeave；

第二種，在路由組件中監(jiān)聽(tīng)$route，每次路由變化就會(huì)調(diào)用其中方法加載數(shù)據(jù)，需要注意的是第一次進(jìn)入路由組件$route的監(jiān)聽(tīng)不會(huì)觸發(fā)，我們需要在mounted方法中調(diào)用相同加載數(shù)據(jù)的方法；

我們?cè)诖a中使用的是方法一，以故事列表進(jìn)入到故事編輯頁(yè)為例，從列表傳遞index給編輯頁(yè)，利用beforeRouteEnter進(jìn)入路由時(shí)就加載新的數(shù)據(jù)。

編輯頁(yè)中關(guān)鍵代碼，即加載數(shù)據(jù)、更新本地共享數(shù)據(jù)：

export default {
 // 編輯頁(yè)中, 進(jìn)入路由前加載數(shù)據(jù)
 beforeRouteEnter(to, from, next) {
  next(vm => {
   const index = vm.$route.params.storyIndex
   vm.storyIndex = index
   vm.storyData = window.profile.storyList[index]
  })
 },

 methods: {
  // 提交成功后，更新本地共享數(shù)據(jù)
  submit() {
   Adapter.post('...').then(result => {
    window.profile.storyList.splice(this.storyIndex, 1, result)
   }) 
  },
 },
}

列表頁(yè)中關(guān)鍵代碼，即返回時(shí)更新數(shù)據(jù)：

export default {
 beforeRouteEnter(to, from, next) {
  next(vm => {
   vm.storyList = window.profileData.storyList
  })
 },
}

這部分需要注意的有兩點(diǎn)：

• beforeRouteEnter中無(wú)法調(diào)用組件實(shí)例，因?yàn)閳?zhí)行時(shí)還在組件生命周期的beforeCreate之前，而其中的next方法是在組件mounted之后執(zhí)行，如需引用可在next方法中，引用其參數(shù)，該參數(shù)就是組件實(shí)例；
• 如果發(fā)現(xiàn)你的next方法無(wú)法執(zhí)行，請(qǐng)升級(jí)到2.6+版本，之前的版本這部分有些問(wèn)題；

保留瀏覽位置

從故事編輯頁(yè)回到故事列表頁(yè)，我們希望可以保存之前瀏覽的位置。思路也很簡(jiǎn)單，進(jìn)入編輯頁(yè)時(shí)保存scrollTop，返回時(shí)scrollTo即可。而且vue-router對(duì)象有屬性可以實(shí)現(xiàn)這個(gè)功能，這就簡(jiǎn)潔多了。

由于我們過(guò)渡動(dòng)畫(huà)中間，有將路由組件定位成fixed的操作，所以，動(dòng)畫(huà)結(jié)束后再手動(dòng)滾動(dòng)到目標(biāo)位置：

new VueRouter({
 routes,
 scrollBehavior (to, from, savedPosition) {
  const y = savedPosition && savedPosition.y || 0
  setTimeout(() => { window.scrollTo(0, y) }, 300)
 }
})

總結(jié)

vue-router我們?cè)谄獴端的場(chǎng)景中經(jīng)常用到，尤其是分步驟填寫(xiě)表單的頁(yè)面。前期在使用過(guò)程中總是不太順暢，摸索幾次后，最終找到比較“舒適”的使用方法，索性就梳理成文。
當(dāng)然，還有其他一些特殊場(chǎng)景的用法，這里暫時(shí)不說(shuō)了，等項(xiàng)目中用過(guò)后再另起一文，繼續(xù)研究。

參考文獻(xiàn)

1. 《官方文檔》
2. 《滾動(dòng)行為》

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。