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

Question

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

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

问题是，我无法弄清楚我将如何构建它 - 我试图从子路径的想法开始，但我不知道将孩子放置在哪里，<router-view>因为它的位置总是基于哪个项目而动态只是单击以展开。

我有一种预感，它与命名视图有关，但我无法理解它。

欢迎任何想法！

标签： javascriptvue.jsvuejs2vue-router

Answer 1

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

一旦你像上面对模态框所做的那样对动态路由进行排序，将文章的简介和动画展开应该相当简单。Vue docs cookbook 有一篇关于构建动态博客的好文章，它也应该派上用场。