快捷導(dǎo)航

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

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

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

不好意思，標(biāo)題比較啰嗦，因?yàn)檫@次的流水賬確實(shí)屬于一個(gè)比較細(xì)節(jié)的小東西，下面詳細(xì)講：

1需求

最近在使用electron-vue 開(kāi)發(fā)一個(gè)跨平臺(tái)的桌面端軟件，剛上手寫(xiě)了幾個(gè)頁(yè)面，遇到一個(gè)問(wèn)題：桌面端軟件通常會(huì)有導(dǎo)航需求，類(lèi)似下圖

導(dǎo)航按鈕

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

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

2 解決

其實(shí)思路很簡(jiǎn)單，既然是在后退操作中丟失了params，那么我們自然會(huì)想到：如何保存一下params！沒(méi)錯(cuò)，就是這么粗暴，你既然要丟，我就把你保存一下！

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

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

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

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

/*
Vuex store 定義存儲(chǔ)對(duì)象RouterParams
*/
//...
const state = {
 //定義一個(gè)存儲(chǔ)map，key：導(dǎo)航name，value：導(dǎo)航params
 paramMap: {}
}

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

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

很簡(jiǎn)單吧！總共沒(méi)有幾行代碼 O(∩_∩)O~

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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