带有 vue-router 的谷歌收件箱式导航

Question

我正在使用vue-router 构建一个应用程序，并尝试实现类似于（现已失效的）Google Inbox 的 UI。或者Techcrunch 主页，这可能是我需要的更好的再现。

• 有一个项目列表
• 当您单击其中一项时，它会“原地展开”以显示更多详细信息。
• URL 也会更新以反映展开的项目
• 单击“返回”时，项目会折叠回列表中
• 直接访问 URL 时，页面应显示展开项，并且（可选）可以在下方显示更多列表项。

问题是，我不知道如何构建它 - 我试图从子路径的想法开始，但我不知道将孩子放在哪里 <router-view> 因为它的位置总是根据刚刚单击的项目进行动态扩展。

我有预感它与 named views 有关，但我无法理解它。

欢迎任何想法！

Answer 1

不久前 Vue github 页面上出现了一个类似的主题，但涉及打开模态而不是打开折叠容器。该线程的一位贡献者写了一个很好的blog post，它可能会为您指明解决方案。

一旦您像上面对模态框所做的那样对动态路由进行排序，将文章的简介和动画展开应该相当简单。 Vue docs 食谱有一个 good article 用于构建一个应该派上用场的动态博客。