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呀

第二篇到此结束，后面的可视化编辑路由，等我有时间了再写。