Vue Router+Vuex實現後退狀態保存

這次帶給大家Vue Router Vuex實現後退狀態保存，Vue Router Vuex實現後退狀態保存的注意事項有哪些，下面就是實戰案例，一起來看一下。

不好意思，標題比較囉嗦，因為這次的流水帳確實屬於比較細節的小東西，下面詳細講：

# 1需求

最近在使用electron-vue 開發一個跨平台的桌面端軟體，剛上手寫了幾個頁面，遇到一個問題：桌面端軟體通常會有導航需求

# 點選返回按鈕，返回上一頁，並且顯示上頁內容。其實不只App，即使普通的網頁中也會有這類需求，尤其是使用vue寫SPA時。

專案中的導覽幾乎都是採用router.push({name: 'xxx', params: {xxx:123...}})這種方式。這種方式導致的一個直接問題是：當點擊後退按鈕(調用 router.go(-1))時，history中只保存了URL而遺失了params物件，進而導致依賴params的頁面渲染異常。

2 解決

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

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

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

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

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

/*
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中设置一个全局导航钩子
*/
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
})
//...

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

JS操作瀏覽器開啟關閉

#js怎麼封裝Canvas成外掛

js使用正規程式進行密碼強度驗證

#

以上是Vue Router+Vuex實現後退狀態保存的詳細內容。更多資訊請關注PHP中文網其他相關文章！