通常情况下一个vue项目,随着时间的增加,router会越来越多,而大部分的代码其实都是重复的,修改很麻烦,还不如通过工具生成。
为package.json添加依赖
yarn add --dev vue-gen-router
4种使用方式
- 把yaml数据转换成tsx,并且输出到src/routers目录下,文件命名为config.tsx
node_modules/.bin/vue-gen-router -i example/router.yaml -o src/routers -f config.tsx
- 把yaml数据转换成js,并且输出到src/routers目录下,文件命名为config.js
node_modules/.bin/vue-gen-router -i example/router.yaml -o src/routers -f config.js
- 把tsx数据转换成yaml文件,并且输出到./目录下,文件命名为router.yaml
node_modules/.bin/vue-gen-router -i example/config.tsx -o src/routers -f router.yaml
参考例子中文件夹下的example/router.yaml,建立自己的router.yaml,基本上和之前写vue-router时没有多大区别
参考example
- [必选]-i yaml的加载文件
- [可选]-f 生成的router的文件名,默认是config.tsx, 如果修改成xxx.js,则生成的就是js文件
- [可选]-o 生成的router的文件输出到那个文件夹,默认是src/routers