溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

詳解使用Vue Router導航鉤子與Vuex來實現后退狀態保存

發布時間:2020-09-16 19:36:25 來源:腳本之家 閱讀:189 作者:changchao 欄目:web開發

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

1需求

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

詳解使用Vue Router導航鉤子與Vuex來實現后退狀態保存

導航按鈕

點擊返回按鈕,返回上一頁,并且顯示上頁內容。其實不止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
})
//...

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

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女