背景

後台系統首頁，存在各個訂單狀態的數量統計，現需要實現點擊後跳轉到對應頁面，即快速跳轉。目前系統只有一個訂單列表頁面，table上方倒是有查詢表單，可以根據不同狀態篩選數據。

初步思路

首頁通過框架路由API跳轉，攜帶參數；目標頁面初始化階段獲取參數，填入表單，發起查詢請求。

分析現有代碼

列表頁面由一個統一的Table組件封裝，Table內有查詢Form、Table等組件，通過外部傳入的查詢form字段渲染search-form以及GetList接口地址去執行getTableData；表單具有查詢和重置表單功能。

分析方案

基於Vue的路由方案，兩種。第一種使用query傳遞，特點是參數顯示在目標頁面地址；第二種，使用params，且路由要配置動態路由，特點是不會顯示在地址欄，刷新消失。因為我們的項目路由是通過後台配置填寫保存的，避免修改線上路由，選擇方案一。

初步效果

通過使用方案一，獲取參數，動態將值綁定到查詢表單，可以看到頁面在此過程發出兩條請求，查看查詢參數已經攜帶，最終展示數據為無參數的那一條；操作發現，重置表單後，表單數值清空，但是查詢參數依然存在。

分析問題

組件內部，默認啓用了接收路由參數選項，組件初始化階段就查詢了接口，在修改查詢表單後，再次查詢接口，但是因為數據量少，最快返回，之後查詢全部數據的接口才返回；重置表單後，仍然從路由部分獲取了參數。

解決思路

我們要解決兩個問題，第一個是第二次請求發生的時候，取消上一次請求；第二個保證重置表單後，查詢全部數據。
對於第一個問題，網上有很多設計方案，主要分為兩種方向，第一種為在request設計上加入cancell功能，這樣針對所有相同的url，短時間內兩次請求都可以進行取消；第二種在組件內重寫GetTableData方法，實現Promise的取消機制，隨便一搜也有一堆的代碼案例。
對於第二個問題，我的解決方案也是兩種，第一種是在頁面上獲取到數據的時候，replace當前路由並清空query；第二種是在Table組件內，查詢方法中忽略掉路由參數。考慮到頁面上組件加載很快，頁面參數沒來得及改變，可能組件內已經執行請求，所以採用方案二，在合適的時機忽略掉路由參數，具體實現為：配置中忽略路由參數（因為頁面級我已經處理了，將參數賦值到表單），在點擊重置按鈕時，將路由參數清空（否則刷新頁面依然可以根據路由參數查詢，不太符合常規操作）。
現在，只剩下取消請求的方案設計，考慮到這種改動理論上是覆蓋整個項目的，如果有影響，會比較嚴重，所以再次分析代碼，發現，只有在傳遞了GetList API地址時候，會執行請求，所以將實現方案修改為：在處理完路由參數後一併將API地址填入Props中，這樣無論頁面是否存在參數，我們的業務邏輯執行流程沒有被中斷，也不需要設計複雜的cancell Promise，對於項目影響也是最小的，説實話，差點就開始重新設計request了。

總結

一句話：思則變 變則通 通則達