現在正式回歸，開始好好做項目了，正好這一個項目也開始慢慢的開始起色了，前面的準備工作都做的差不多了。
而且我現在也開始慢慢瞭解到了一些項目才開始需要的一些什麼東西了，vuex、router這些都是必備的，後期一定要練得非常熟練才行。

一.重寫push/replace方法

有一個編程式導航的bug，當我們重覆點擊編程時導航的跳轉，同時傳的都是相同的參數，這個時候就會報錯,報NavigationDuplicated，這是一個底層錯誤，歸根結底是因為vue在2的版本將編程式導航跳轉的添加了一個 promise，我們都知道promise是需要一個成功回調和失敗回調的，而我們在發起跳轉的時候並沒有定義這些，所以會報錯

所有有一個簡單粗暴的解決辦法，就是在後面添加兩個回調函數，甚至你可以參數都不寫，反正回調已經有了，無非就是你不列印輸出也不做什麼邏輯的事情

但是這種方法治標不治本，萬一有很多路由的跳轉，那是不是每一個跳轉這裡都要去寫一下這兩個回調，顯然是不可能的。

要治標治本，首先得弄清楚幾個問題，我們的$router其實是VueRouter這個構造函數new出來的實例，然後我們的push、replace方法其實是在這個構造函數的prototype也就是原型對象上，所以我們的push方法裡面的this指向的就是VueRouter的對象實例

下麵就可以開始重寫了，要找到VueRouter所在的地方，也就是router的配置文件，這裡面註冊了他一下，首先我們需要定義一個變數將原來的VueRouter原型對象上的push方法保存下來，然後開始重寫，可以看到我們的原始push方法是要傳入是三個參數，第一個是跳轉的位置，後面兩個是promise的回調

所以我們可以判斷一下我們傳進來的參數除了location之外有沒有兩個回調，做一個if判斷，如果有就執行你的回調，如果沒有我就自動寫上兩個回調，這裡還有一個註意點，我們之前分析過push的this是構造函數實例，你如果直接像下麵這樣調用，很明顯你裡面的this都會指向window，因為這個變數是在全局作用域下定義的

所以通過call方法將this改回來，幸運的是，此時這個push方法裡面的this就是我們的構造函數實例

replace同理

二.Home模塊組件拆分

又是進行模塊拆分的時候，所以首先要完成靜態頁面，再進行模塊拆分，然後是動態數據展示，最後是一些事件的完成。對於Home模塊

首先是一個三級聯動效果，而且由於是home、search都有的，所以這個組件可以註冊為全局組件

然後輪播圖是一個組件

今日推薦一個組件

熱賣排行一個組件

猜你喜歡一個組件

家用電器一個組件，後面的手機通訊跟其一樣的結構，所以可以復用

最後各商品的log一個組件

所以一共有七個組件

1.TypeNav三級聯動全局組件

直接在Home文件夾下麵創建一個文件夾typenav作為我們的三級聯動組件

靜態頁面創建好

然後就可以去註冊全局組件了，在入口文件註冊，前面是我們的組件標簽名字，後面是我們的組件所在的位置

因為是全局組件，所以其他組件要用直接用，不用再去註冊導入

2.剩下靜態組件

在Home下創建對應的組件文件夾，然後創建組件複製對應的html+css+圖片，導入到home並註冊即可，要註意這裡這是完成靜態頁面，所有的邏輯包括輪播圖等，這些都暫時不要管

三.axios相關配置

1.axios二次封裝

為什麼要對axios進行二次封裝？

其主要目的是為了請求攔截器和響應攔截器，其中請求攔截器就是當我們發起請求之前可以處理一些業務；響應攔截器就是當我們的數據響應回來的時候可以處理一些業務

首先我們一般是在src下麵創建一個api的文件夾裡面存放一些axios的配置文件

首先在api下創建一個request關於請求的axios配置文件

先通過axios的create方法可以創建一個axios的自定義實例，其中裡面的 baseurl會自動加在以後配置axios時的url前面，就不用再去輸入一些大家都有的首碼了，timeout就不用說了，xhr2新特性

添加請求和響應攔截器可以直接參考axios中文文檔

這裡面 config是我們的請求頭，必須原樣返回，Promise.reject（）是promise的一個方法，專門返回一個錯誤的promise對象至於這裡為什麼要返回一個promise對象（因為我們封裝了之後後面發起ajax請求都是用requests來發起，我們的axios最典型的特點就是promise風格，所以由.then方法），然後我們只要返回成功的data數據直接在這裡響應攔截器返回成功的數據返回data

不用去記，文檔裡面有，但是要懂寫的什麼。這樣一配置過後，在請求和響應被then或者catch之前就會被攔截到了

2.介面統一管理

當我們項目比較小的時候完全可以在mounted生命周期函數來發起ajax請求。

但是如果我們項目比較大的時候，每個都去他的mounted去發，如果介面地址一變化，又要每個去改就不太現實。

所以這裡採用介面統一管理，一般是定義在api文件夾下的index.js文件

我們先來獲取三級聯動的數據，當我們在前面axios二次封裝的時候，就已經創建了一個axios的實例，這個實例才擁有攔截器的功能，所以我們後面要使用攔截器發起請求就只能靠這個實例來發起，還有我們已經添加了baseurl所以在寫url的時候可以不寫api了

像這樣我們就可以去測試一下了，如果要發起獲取三級聯動的請求，就直接調用函數即可，註意這裡是按需導出

結果是報錯404，因為我們從始至終都還沒有配置過伺服器的地址，這裡兩個解決方案

• 方案一：將前面的baseurl添加上伺服器地址

• 方案二：（推薦），用到我們的vue專門用來處理伺服器的一個配置項，代理。

  這樣配置過後，當我們發起axios請求，並且路徑當中含有/api的話, 就會自動去這個伺服器找/api下麵的這些資源，我們原來做代理還有一個配置項pathWrite一個正則替換為空字元串，這個的意思是繞過public下麵的同名配置文件，但是伺服器裡面沒有這個pathwrite的目錄所以要替換為空，但是我們這裡伺服器裡面有api的目錄就不用去替換了

  

3.nprogress進度條使用

首先需要明確一點，這個進度條是我們刷新網頁也就是獲取請求的時候發起的，所以說我們可以把進度條的邏輯寫在請求和響應的攔截器裡面，這也是第一次使用攔截器，知道了攔截器的處理一些事件的邏輯是寫在這個攔截器裡面

安裝導入，並且他有兩個方法，start和done分別表示什麼時候開始，什麼時候結束，並且還需要導入他的樣式

四.vuex模塊式開發

vuex是來幫我們管理數據的，當一個項目過大時，不僅是要用vuex來幫我們管理數據，而且還需要分模塊來管理數據，這裡就不多介紹了，前面已經介紹過了，直接說怎麼來分，一般是先安裝vuex然後創建一個store文件夾，裡面有一個總得vuex配置文件index.js，因為他是一個插件，所以需要註冊，然後這裡直接採用模塊化開發。

在store創建文件夾home、search代表兩個模塊

然後在我們的主store裡面導入並且暴露，註意暴露要添加一個配置項 modules

最後還有一點在入口文件導入store並且放到vm裡面去

五.三級聯動數據業務

做好了前面的這些前置工作，就可以開始第二步，動態數據的渲染，這裡三級聯動的nav需要通過vuex來處理處理，所以要dispatch到actions，而且應該是頁面一刷新就有，所以直接寫在mounted生命周期函數里

開始之前，有個主意事項，我們之前是把TypeNav這個組件寫在Home這個路由組件裡面的，全局組件一般寫在Components裡面，所以交換一下位置

這裡就不用傳值了，我們要在home模塊的actions裡面去發起ajax請求，然後我們前面介面統一管理，已經做好了獲取三級聯動的函數，所以這裡直接導入，然後調用

接下來重點來了，我們封裝的這個函數是做了一個攔截器，到後導入的這個攔截器，但是我們的攔截器requests他也是axios的一個實例，所以axios得到的結果是promise對象，所以requests出來的結果也是promise對象，所以我們的這個函數的返回結果也是promise對象

雖然我們封裝攔截器的時候，在響應攔截器裡面寫了一些邏輯比如如果是成功，就直接返回data這個數據，但是這是回調裡面寫的，意思就是要用then的方法，你就可以直接讀取data，而我們這裡返回的是那個promise對象，這裡重點來了，利用async和await提取我們要的數據，首先await放在一個promise前面一個作用是他會等待所有的promise非同步處理完，第二個是他可以提取而且只能提取promise裡面成功的回調函數的結果，然後我們的async就是會把不管正常函數還是promise對象都變成promise對象，所以他們兩個經常一起使用，最終得到的結果就是這個promise成功的回調函數的結果,註意區別一下.then獲取到的結果就是data，而這裡就是成功返回的那整個對象

註意，我這裡在組件裡面獲取數據，之前說用mapstate要用簡寫方法，還需要在vuex的模塊裡面加入配置項namespaced

這裡真的搞了半天，終於找到解決辦法了，首先這種情況我們的namespaced寫在導出處

其次很重要的一點，當我們做了模塊化又寫了命名空間後，我們的dispatch需要寫對應的目錄才能夠找到這個actions

現在有了數據，根據結構去列表渲染即可

1.js完成動態背景顏色

滑鼠滑過有動態有背景顏色，不通過css，通過js來完成，這裡的核心在於，我們列表渲染的時候有一個index，同時定義一個數據currentIndex，當我們滑鼠滑過哪一個就把這個一個index賦值給currentIndex，重點邏輯在於給標題綁定一個:class也就是動態的綁定class，裡面寫一個對象前面是屬性名，後面為邏輯當index=currentIndex，為true，你這個才會有class

再添加一個滑鼠離開事件，將currentIndex改為-1即可，一開始currentIndex不能為任何一個已有的index。

但是這裡還有一個需求，滑鼠不是離開標題就沒有背景顏色了，包括上面的全部商品分類離開之後才會消失背景顏色

商品分類和我們的三級聯動是同級

這裡把他們添加一個共同的父級，通過事件委托，把滑鼠移出事件給到他們的父級，移出他們都會通過冒泡去觸發這個移出事件

2.js完成二三級分類顯示隱藏

找到二級分類代碼處，來一個style動態綁定並且值為一個三目表達式，看current是否等於你這個index，是就返回block，否則返回none

這兩個事件用css都可以完成，但是js有js的好處，比如現在我滑鼠移到全部商品分類，這個二級分類還是在的，這個用css實現起來好像也可以，但是有點不太符合語義化，感覺有點強制性