vue的路由优化

         最近有点忙,都不怎么写博客了。首先是换了份新工作,需要加班的情况比较多,其次的话年初给自己定下的目标(lol满英雄退游)还差差不多8/141,所以需要多花点时间去完成自己的电竞梦,写博客就随便来一篇糊弄下吧,反正我一直也是这样做的,看得懂我意思的人,自然一眼就明白精髓,看不太懂的,也只能让我指出,所以文章的质量就无所谓啦,而且把。。。准备一篇博客至少也要来个30分钟的时间,差不多是一局游戏的时间,而且前面码了那么多废话,都够我补刀出吧多兰剑了,

回正题,首先,我们看到的路由(vue为例子),基本都是长这样的:

vue的路由优化

或者是这样的(下面这张是随便在网上找的):

vue的路由优化

总之.............................................看到这两个,你心情不会复杂,我是不相信的,所以我们需要优化下结构,让他看起来没那么操蛋。当然,如果你不想的话,那就随便你了

第一步,我们先了解下vue的router的结构,通过粗略+仔细+大概五秒钟的观察,我们可以看出

1.这玩意是个数组,

2.这玩意让爸爸看着超不爽,

3.这玩意好多地方是重复的结构

所以,关注到第一点,我们可以把他抽离出来一部分,比如再定义一个js文件,然后再里面拉个index.js,比如文件的结构是下面这样的:

vue的路由优化

命名清晰。简单明了,然后看下我们新建的js文件

vue的路由优化

虽然看起来也是很操蛋,但是想想,通常一个模块最多也就十几二十个页面,所以这份操蛋,最多也就十几二十次而已,比起全部写在router/index.js好多了,再让你们感受下:

vue的路由优化

在此由衷的感谢wq的前同事们在此提供的反面教材,感谢t哥的代码,让我头皮发麻了一个星期,希望你们不会感受到我的发麻;

回到正题,我们刚扯到了路由最终导出的文件,是一个数组对象吧?

vue的路由优化

不接受反驳,所以,我们可以这样考虑,抽出这个数组的一部分来,然后去接上去,

差不多就是这个思路,但是为了装逼一点。。。我个人决定用...来封装,比如:

被抽出来的部分:vue的路由优化

希望大家明白这个是什么,没错,是个array,所以呢,我们直接拼接到router里面是不对的。至于用push方法放上去,最后再调用的话,如果你不嫌麻烦,不嫌被人打死的话就用吧,所以我们装逼的使用下...就好了

vue的路由优化

怎么导入我就不说了,告辞,干活去,当然,最后你可以试试,不管你试不试,我这边是成功的,嘿嘿嘿

-------------------------------------------最后问一句:盖伦怎么打德厄莱斯?-------------------------------------