詳解使用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里取。似乎沒錯，就是麻煩了點兒?。e慌，咱們有導航鉤子 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中設置一個全局導航鉤子
*/
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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
Vue.js?是一個流行且強大的?JavaScript?框架,它允許我們構(gòu)建動態(tài)和交互式?Web?應用程序,本文我們將深入探討?Vue.js?應用程序中內(nèi)存泄漏的原因,并探索如何定位和修復這些問題的有效策略,希望對大家有所幫助2023-09-09
vue3?elementPlus?table實現(xiàn)列寬可拖拽功能
這篇文章主要介紹了vue3?elementPlus?table實現(xiàn)列寬可拖拽功能,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08
相信現(xiàn)在很多人都是用Vue做過了各種項目,但是項目代碼做完和上線并不代表這結(jié)束,還有上線以后的優(yōu)化也是很重要的一點,這篇文章主要給大家介紹了關于Vue項目優(yōu)化打包的相關資料,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了vue?background-image?不顯示問題的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
今天小編就為大家分享一篇vue 項目打包時樣式及背景圖片路徑找不到的解決方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Sentry 是一個開源的錯誤追蹤工具，可以幫助開發(fā)人員實時監(jiān)控和修復系統(tǒng)中的錯誤。這篇文章主要介紹了vue項目前端錯誤收集之sentry,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05
這篇文章主要介紹了vue在線動態(tài)切換主題色方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
這篇文章主要介紹了VUE組件的計算屬性詳解，使用計算機屬性還是methods取決于你是否需要緩存，當遍歷大數(shù)組和做大量計算時，應當使用計算機屬性，除非你不希望得到緩存，下文來了解具體詳情2022-06-06
computed是vue的配置選項,它的值是一個對象,其中可定義多個計算屬性,每個計算屬性就是一個函數(shù),下面這篇文章主要給大家介紹了關于vue中計算屬性computed的詳細講解,需要的朋友可以參考下2022-07-07
vue?this.$router和this.$route區(qū)別解析及路由傳參的2種方式?&&?this.$route
this.$router?相當于一個全局的路由器對象,包含了很多屬性和對象（比如?history?對象）,任何頁面都可以調(diào)用其?push(),?replace(),?go()?等方法,本文給大家介紹Vue中this.$router與this.$route的區(qū)別?及push()方法,感興趣的朋友跟隨小編一起看看吧2023-10-10