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

Question

我是Vue.js的新手。我将迁移几年前使用ExtJS框架完成的应用程序。正如一些开发人员可能知道的那样，ExtJS曾经是一个很好的框架，用于构建优秀的SPA应用程序，其中有许多已经内置在可视化组件中，这些组件可以帮助您减少开发时间。但是，由于现在是可行的，所以我们决定开始迁移这个应用程序。服务器端不会改变，所以这是一个巨大的优势，因为这只会是客户端的工作。

实际应用程序如下所示：

​

​

在左边，我们有一个可折叠菜单，它是根据用户权限动态生成的。菜单中的每个元素(对象)都有打开带有特定模块的新选项卡的路径。

​

​

我们知道，我们可能不会得到相同的外观&感觉使用Bootstrap 3x或4x，但至少我们需要有相同的左菜单，并在右边打开多个选项卡，这将是每个模块或选项点击从左边的菜单。

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

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

任何建议或建议都会被采纳。

Answer 1

嵌套子路由必须适合这种情况，我相信。

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

为了保留打开的选项卡，您可以使用URL作为数组：？openTab[]=意外事件&openTab[]=协助

使用get params，您可以构造打开的选项卡列表；活动选项卡来自路由器。

关闭选项卡的内容可以使用动态components：https://v2.vuejs.org/v2/guide/components.html#Dynamic-Components加载。