不好意思,標題比較啰嗦,因為這次的流水賬確實屬于一個比較細節的小東西,下面詳細講:
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 }) //...
很簡單吧!總共沒有幾行代碼 O(∩_∩)O~
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。