vue.js - 关于vuejs动态组件问题

问题描述

问 题

我们想做一个类似阿里云邮箱这样页签的功能，发现用路由实现并不合适。先看一下图片，

如图：第一个tab是不动的，根据选择邮件，联系人，日程，云盘进行切换，是切换第一个tab里面的内容，假如我单击新建邮件，会出现一个新的tab（new message）, 再单击新建邮件，又会出现一个新的tab，那么内容区域也会切换到相应的tab，每个tab里的内容都是独立的不同的。
这个是路由无法实现的，请问有好的办法能实现这个功能吗？

解决方案

實現過類似功能，可以這樣想：

藍框和綠框都是 <route-view>
藍框是由左邊的郵件、聯繫人之類的控制，
綠框則是由上方的 Tab 控制
這個功能在 vue-router 是可以實現的，詳細請看：嵌套路由

而多個 NewMessage 的效果其實想簡單點就是個數組存放著所有 NewMessage 也許是用索引，或是生成個隨機的 id 來當識別。

點擊對應的 NewMessage 就是從數組中取出相對應的數據塞進去而已。
而這裡也可以靠 vue-router 的鉤子函數來實現: data

等等下班來寫個簡單版本的。

这篇关于vue.js - 关于vuejs动态组件问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！