VUE 集成TypeScript之vue-router重構 (二)

VUE 如何集成TypeScript之初步踩坑 (一)

vue-router的痛點

在上一篇分享中，咱們已經成功的把TypeScript接入vue項目中，接下來咱們會把vue-router做爲項目中的首選改造點。

目前vue-router路由配置有上千行代碼。

從圖中能夠看出，光router就有1200行代碼，而後router代碼其實都是大同小異，不少copy代碼，這樣弊端就很明顯

• 新規一個頁面，很難找到插入的目標定位點，比較麻煩
• 大量配置代碼混雜着邏輯代碼，修改的風險較大
• 一個router通常都有對應的vue component，每次新規都須要寫一堆重複的代碼
• 沒有可視化的路由，很差理解

重構開始

1. 首先就是把配置和邏輯進行分離

把配置文件都獨立出來，單獨變成一個config.tsx文件

用tsx是由於有的router，須要返回一個 keep-alive的組件，而後用ts的話，沒法識別，由於typescript會認爲這是一個jsx

把config.tsx文件單獨導入到，router.ts中

而後run server，這是控制檯報錯了

關於錯誤的處理，能夠看 上一篇文章

雖然控制檯報錯了，可是頁面仍是能很流暢的運行起來，並不影響。

這樣整個路由文件，邏輯和配置基本就分離了，對於後面修改路由的人來講，就方便了不少，算是基本上解決了前面兩個痛點。

2. config.tsx經過配置文件生成

雖然配置和路由分離了，可是配置文件仍是存在着一些痛點，看代碼

能夠看到上述代碼，仍是存在一些大量重複的代碼，好比**‘’、{},[],keep-alive,import**

若是是tsx文件，還須要寫// @ts-ignore，既麻煩也不夠直觀，並且存在着寫錯的可能，爲了不這種狀況，仍是用工具生成比較好，因此花了時間開發了vue-gen-router。

下面直接上代碼

// 爲package.json添加依賴
yarn add --dev vue-gen-router

// 查看例子
node_modules/.bin/vue-gen-router -i example/router.yaml 
複製代碼

默認會在src/routers 目錄下生成一個config.tsx 的typescript的文件

參考例子中文件夾下的example/router.yaml，創建本身的router.yaml，基本上和以前寫vue-router時沒有多大區別

在命令行輸入

node_modules/.bin/vue-gen-router -i router.yaml -o src/routers -f config.tsx
複製代碼

查看生成的代碼

這樣能夠少寫不少代碼，由於是模板生成的，確定不會有問題，關鍵是router的配置文件，變成了yaml數據，爲下一步可視化編輯路由鋪平了道路。

vue-gen-router GitHub連接 喜歡的話給個star呀

第二篇到此結束，後面的可視化編輯路由，等我有時間了再寫。