我正在使用vue-router构建一个应用程序,并试图实现类似于Google Inbox(现已停用)的UI。或Techcrunch主页,可能是我需要的更好的翻译形式。

  • 这里有一个项目列表
  • 当您单击其中一项时,它会“扩展到位”以显示更多详细信息。
  • URL也会更新以反射(reflect)扩展的项目
  • 单击“返回”时,该项目折叠回到列表
  • 直接访问URL时,页面应显示展开的项目,并且(可选)可以在下面显示更多列表项。

  • 问题是,我不知道如何构建它-我试图从子路由的想法开始,但是我不知道将子<router-view>放在何处,因为它的位置始终根据哪个位置而动态只需单击该项目以进行扩展。

    我有一种预感,它与named views有关,但我无法解决。

    任何想法欢迎!

    最佳答案

    不久前,Vue github页面上出现了一个类似的主题,但涉及的是打开模式而不是打开折叠的容器。该线程的一名撰稿人写了一个很好的blog post,它可能会为您提供解决方案。

    一旦对动态路由进行了与上面一样的模态排序,就可以将文章替换为文章并为展开动画了,这将非常简单。 Vue文档库中有一个good article,用于构建一个动态博客,该博客也应派上用场。

    关于javascript - 带有vue-router的Google收件箱样式导航,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/56021167/

    10-15 23:04
    查看更多