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

什么時候模塊應(yīng)該拆成組件？

什么時候應(yīng)該將不同狀態(tài)的模塊寫在同一路由中？

什么時候應(yīng)該將不同狀態(tài)的模塊寫在不同的路由中？

• 什么時候頁面模塊應(yīng)該拆成組件？

  頁面模塊拆成組件是為了更好的復(fù)用重組，只要是可能第二次出現(xiàn)的頁面結(jié)構(gòu)就可以拆成組件。

• 什么時候應(yīng)該將不同狀態(tài)的模塊寫在同一路由中？

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

什么時候應(yīng)該將不同狀態(tài)的模塊寫在不同的路由中？

1、業(yè)務(wù)具有多個不同狀態(tài)，不同狀態(tài)的頁面需要獨立（后一個頁面可能需要返回到前一個頁面），或是需要的數(shù)據(jù)都在一個接口返回的時候（不同頁面的路由由父路由來分發(fā)）

比如一個選擇題作業(yè)的需求，頁面有三個狀態(tài)：做題頁，提交了答案的結(jié)果頁，解析頁。前端所有需要的數(shù)據(jù)都在一個接口中獲取。

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

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

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

image.png

獲取數(shù)據(jù)只需要要第一個頁面去請求接口
未完待續(xù)...