詳解使用Vue Router導(dǎo)航鉤子與Vuex來實(shí)現(xiàn)后退狀態(tài)保存

更新時(shí)間：2017年09月11日 16:39:06 作者：changchao

本篇文章主要介紹了詳解使用Vue Router導(dǎo)航鉤子與Vuex來實(shí)現(xiàn)后退狀態(tài)保存，具有一定的參考價(jià)值，有興趣的可以了解一下

不好意思，標(biāo)題比較啰嗦，因?yàn)檫@次的流水賬確實(shí)屬于一個(gè)比較細(xì)節(jié)的小東西，下面詳細(xì)講：

1需求

最近在使用electron-vue 開發(fā)一個(gè)跨平臺(tái)的桌面端軟件，剛上手寫了幾個(gè)頁面，遇到一個(gè)問題：桌面端軟件通常會(huì)有導(dǎo)航需求，類似下圖

導(dǎo)航按鈕

點(diǎn)擊返回按鈕，返回上一頁，并且顯示上頁內(nèi)容。其實(shí)不止App，即使普通的網(wǎng)頁中也會(huì)有此類需求，尤其是使用vue寫SPA時(shí)。

項(xiàng)目中的導(dǎo)航幾乎都是采用router.push({name: 'xxx', params: {xxx:123...}})這種方式。這種方式導(dǎo)致的一個(gè)直接問題是：當(dāng)點(diǎn)擊后退按鈕(調(diào)用 router.go(-1))時(shí)，history中只保存了URL而丟失了params對(duì)象，進(jìn)而導(dǎo)致依賴params的頁面渲染異常。

2 解決

其實(shí)思路很簡單，既然是在后退操作中丟失了params，那么我們自然會(huì)想到：如何保存一下params！沒錯(cuò)，就是這么粗暴，你既然要丟，我就把你保存一下！

怎么存：其實(shí)想都不用想這是一個(gè)跨組件通信問題拉，所以很自然的，用Vuex保存是最合乎常理的咯！

什么時(shí)候存：第一反應(yīng)，調(diào)用 router.push({name: 'xxx', params: {xxx:123...}})時(shí)保存，然后如果導(dǎo)航回到這個(gè)URL，如果沒有params，嘗試從vuex store里取。似乎沒錯(cuò)，就是麻煩了點(diǎn)兒??！別慌，咱們有導(dǎo)航鉤子 router.beforeEach((to, from, next) => { // ... }) 啊！

正如其名，vue-router 提供的導(dǎo)航鉤子主要用來攔截導(dǎo)航，讓它完成跳轉(zhuǎn)或取消。

說到這兒，你應(yīng)該完全明白我的解決思路了，那下面廢話就不多說了，上代碼：

/*
Vuex store 定義存儲(chǔ)對(duì)象RouterParams
*/
//...
const state = {
 //定義一個(gè)存儲(chǔ)map，key：導(dǎo)航name，value：導(dǎo)航params
 paramMap: {}
}

const mutations = {
 REFRESHPARAM (state, paramKV) {
 //mutation，應(yīng)該能看懂做的操作吧？
 Vue.set(state.paramMap, paramKV.key, paramKV.value)
 }
}
//...

/*
router中設(shè)置一個(gè)全局導(dǎo)航鉤子
*/
const router = new VueRouter({ ... }) //router
router.beforeEach((to, from, next) => {
 // 只有在找不到params時(shí)才"出此下策"
 if (Object.keys(to.params).length === 0) {
 // 從store中取出付給params，此處注意路徑未必完全吻合，以你的為準(zhǔn)
 Object.assign(to.params, store.state.RouterParams.paramMap[to.name] || {})
 }
 // 存儲(chǔ)一下params備用
 store.commit('REFRESHPARAM', {key: to.name, value: to.params})
 next() // 千萬不要忘了，否則導(dǎo)航會(huì)被“掐死”在這兒。:-D
})
//...

很簡單吧！總共沒有幾行代碼 O(∩_∩)O~

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

您可能感興趣的文章: