我们想做一个类似阿里云邮箱这样页签的功能,发现用路由实现并不合适。先看一下图片,
如图:第一个tab是不动的,根据选择邮件,联系人,日程,云盘进行切换,是切换第一个tab里面的内容,假如我单击新建邮件,会出现一个新的tab(new message), 再单击新建邮件,又会出现一个新的tab,那么内容区域也会切换到相应的tab,每个tab里的内容都是独立的不同的。
这个是路由无法实现的,请问有好的办法能实现这个功能吗?
专门上去研究了一下,发现这是一个奇妙的黑科技。
感觉他们是自己开发了一套轮子,每一个tab下的page都相当于一个独立的app,有独立的状态。
然后你看他的地址,是h=${hash}
。那个hash值(估计是base64)应该是可以转换为一个状态码的。
然后再看一个收件箱的两封邮件,发现hash的前一部分不变,后面变了。
我觉得做多page是基本能力了。
难的是,其中一个page还想采用路由。
我估计可以重新开发一套vue-router的轮子了。
要不,你问问 http://weibo.com/arttechdesign
實現過類似功能,可以這樣想:
藍框和綠框都是 <route-view>
藍框是由左邊的郵件
、聯繫人
之類的控制,
綠框則是由上方的 Tab
控制
這個功能在 vue-router
是可以實現的,詳細請看:嵌套路由
而多個 NewMessage
的效果其實想簡單點就是個數組存放著所有 NewMessage
也許是用索引,或是生成個隨機的 id
來當識別。
點擊對應的 NewMessage
就是從數組中取出相對應的數據塞進去而已。
而這裡也可以靠 vue-router
的鉤子函數來實現: data
等等下班來寫個簡單版本的。