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

作者: 张阳君 分类: 前端技术

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

很嘚瑟

从一个需求说起

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

轮播图需求

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

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

文章管理页

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

顿悟

复用路由映射的页面组件

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

vue的props属性

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

静态import路由组件复用出错

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

最终解决方案

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

动态引入vue组件

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

资源选择器

(全文完)

0 条评论
回复
支持 Markdown 语法
暂无评论,来抢个沙发吧!