VUE路由组件复用的一个技巧
source link: https://www.zhangyangjun.com/post/vue-router-component-reuse-tech.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
VUE的灵魂在于组件化开发，在VUE的世界里，我们可以把一切东西定义为组件，包括每一个路由对应的页面。而我之前开发都没有充分认识到页面也是组件这个概念，无形中增加了很多工作量，直到这两天写网站后台某个需求时才突然醒悟，原来路由对应的页面组件也是可以复用的，而且用起来一时爽，一直用真的一直爽。
从一个需求说起
网站的轮播图模块，需要可以从已有资源中添加内容，页面大概是下面这个样子的：
也就是说，管理员可以从现有的文章列表等资源中，选择某个项目，抽取其标题、链接、封面等信息一键填充到表单中。换做平时，我可能就直接动手撸一个vue的组件，然后用dialog包裹到当前页面执行就是了，但是今天不一样，哪里不一样了？天冷，手是冻僵的，内心是拒绝的...
于是我回头看了一眼之前已经完成的文章管理页面：
似乎可以做点什么，脑海里闪过一道光，我当时的表情可能是这样的：
复用路由映射的页面组件
既然页面也是一个组件，为什么不把他当成普通组件进行复用呢？没错，那就直接动手吧，首先是修改文章管理页面，我们新增一个props属性，并赋予默认值，在默认值情况下，这个管理页面该怎样显示就怎样显示，而作为局部组件调用时，通过设置组件属性改变其外观和行为：
大家可以看到，这里设置了一个 selector 属性，默认值为 false ，在该页面作为局部组件调用时，我们通过设置 selector 为 true 进行调整。原本写到这里，本文就该结束了，结果半路出了幺蛾子。
静态import路由组件复用出错
在VUE中注册局部组件时，一般都是直接 import 某个vue文件，然后在component属性中进行映射，我一开始也是这么做的，但是却意外地发现如果某个组件被提前注册为局部组件，其注册路由组件时会变成 undefined 。这个问题困扰了我很久，似乎页面组件和其他组件还有那么一丢丢不同。
最终解决方案
考虑到静态import组件不行，那就通过动态赋值去实现吧，所以最后这些页面组件使用 import() 去注册，写起来像下面这样：
最后终于在寒冷的冬夜解决了这么一个小麻烦，特此发文mark一下！最后上一下完成的截图：
（全文完）
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK