Vue.js企业应用程序框架布局/菜单

Question

我是Vue.js的新手。我将使用ExtJS框架迁移我们几年前做过的应用程序。正如一些开发人员可能知道的那样，ExtJS曾经是一个很好的框架，用于构建漂亮的SPA应用程序，其中包含大量已构建的可视组件，可帮助您缩短开发时间。但是，由于Progresive Application Frameworks现在已经成为现实，我们决定开始迁移这个应用程序。服务器端不会改变，因此这只是客户端的工作。

实际应用程序如下所示：

在左侧，我们有一个基于用户权限即时构建的可折叠菜单。菜单中的每个元素（对象）都有用于打开具有特定模块的新选项卡的路径。

我们知道我们可能看不到同样的外观和感觉使用Bootstrap 3x或4x，但至少我们需要使用相同的左侧菜单，并且右侧是打开多个选项卡的方法，这些选项卡将从左侧菜单中单击每个模块或选项。

我一直在尝试找到一个示例代码或项目，可以让我们从一个好的模板开始。

如何使用Vue.js实现这种方法，使用路由器执行Tabs功能有多容易？有没有人使用Vue.js做过类似的事情？

  

任何建议或推荐都是非常有用的。

Answer 1

我认为嵌套的子路由必须适合这种情况。

routes: [
    {
      path: '',
      component: Layout,
      children: [
        {
          path: 'today',
          component: Incidents,
          name: 'incidents'
        }
      ]
    }
  ]

为了保留打开的标签页，您可以使用URL参数作为数组：？openTab [] =事件＆amp; openTab [] =帮助

使用get params可以构建打开的选项卡列表;并且活动选项卡来自路由器。

可以使用动态component s：https://vuejs.org/v2/guide/components.html#Dynamic-Components

加载已关闭标签的内容