VUE路由组件复用的一个技巧

VUE的灵魂在于组件化开发，在VUE的世界里，我们可以把一切东西定义为组件，包括每一个路由对应的页面。而我之前开发都没有充分认识到页面也是组件这个概念，无形中增加了很多工作量，直到这两天写网站后台某个需求时才突然醒悟，原来路由对应的页面组件也是可以复用的，而且用起来一时爽，一直用真的一直爽。

从一个需求说起

网站的轮播图模块，需要可以从已有资源中添加内容，页面大概是下面这个样子的：

也就是说，管理员可以从现有的文章列表等资源中，选择某个项目，抽取其标题、链接、封面等信息一键填充到表单中。换做平时，我可能就直接动手撸一个vue的组件，然后用dialog包裹到当前页面执行就是了，但是今天不一样，哪里不一样了？天冷，手是冻僵的，内心是拒绝的…

于是我回头看了一眼之前已经完成的文章管理页面：

似乎可以做点什么，脑海里闪过一道光，我当时的表情可能是这样的：

复用路由映射的页面组件

既然页面也是一个组件，为什么不把他当成普通组件进行复用呢？没错，那就直接动手吧，首先是修改文章管理页面，我们新增一个props属性，并赋予默认值，在默认值情况下，这个管理页面该怎样显示就怎样显示，而作为局部组件调用时，通过设置组件属性改变其外观和行为：

大家可以看到，这里设置了一个 selector 属性，默认值为 false ，在该页面作为局部组件调用时，我们通过设置 selector 为 true 进行调整。原本写到这里，本文就该结束了，结果半路出了幺蛾子。

静态import路由组件复用出错

在VUE中注册局部组件时，一般都是直接 import 某个vue文件，然后在component属性中进行映射，我一开始也是这么做的，但是却意外地发现如果某个组件被提前注册为局部组件，其注册路由组件时会变成 undefined 。这个问题困扰了我很久，似乎页面组件和其他组件还有那么一丢丢不同。

最终解决方案

考虑到静态import组件不行，那就通过动态赋值去实现吧，所以最后这些页面组件使用 import() 去注册，写起来像下面这样：

最后终于在寒冷的冬夜解决了这么一个小麻烦，特此发文mark一下！最后上一下完成的截图：

（全文完）