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

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

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

不好意思，標題比較啰嗦，因為這次的流水賬確實屬于一個比較細節(jié)的小東西，下面詳細講：

1需求

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

導航按鈕

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

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

2 解決

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

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

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

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

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

/*
Vuex store 定義存儲對象RouterParams
*/
//...
const state = {
 //定義一個存儲map，key：導航name，value：導航params
 paramMap: {}
}

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

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

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

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

您可能感興趣的文章: