這大概是小白提升工作效率必須要弄明白的幾個問題：

什么時候模塊應該拆成組件？

什么時候應該將不同狀態的模塊寫在同一路由中？

什么時候應該將不同狀態的模塊寫在不同的路由中？

• 什么時候頁面模塊應該拆成組件？

  頁面模塊拆成組件是為了更好的復用重組，只要是可能第二次出現的頁面結構就可以拆成組件。

• 什么時候應該將不同狀態的模塊寫在同一路由中？

1、一個頁面在不同狀態下展示的模塊不一樣而已，通過不同狀態控制不同組件的顯示，或是后面顯示的模板不需要通過按手機上的返回按鈕返回到前一個模板的時候。

什么時候應該將不同狀態的模塊寫在不同的路由中？

1、業務具有多個不同狀態，不同狀態的頁面需要獨立（后一個頁面可能需要返回到前一個頁面），或是需要的數據都在一個接口返回的時候（不同頁面的路由由父路由來分發）

比如一個選擇題作業的需求，頁面有三個狀態：做題頁，提交了答案的結果頁，解析頁。前端所有需要的數據都在一個接口中獲取。

不好的寫法是：在做題頁請求接口獲取到所有的數據，然后將數據存在localStorage中，后面的結果頁、解析頁需要數據就從localStorage或sessionStorage中獲取；這樣有很大的弊端就是緩存中存的數據存在被覆蓋的風險或退出頁面之后如果直接進讀sessionStorage的頁面會獲取不到數據，這也是有可能的如果有一個需求是，這個頁面可以分享出去，然后用戶可以直接進這個頁面的話。

可以滿足需求的可執行的寫法： 三個頁面都去請求一次獲取數據的那個接口，這樣無論如何都可以保證可以去請求數據。

最好的寫法：利用vue-router中的父子路由來做

image.png

獲取數據只需要要第一個頁面去請求接口
未完待續...