Question

我们很多人都熟悉企业Web应用程序，它们是所有业务数据的终结点。它们通常是登录身份验证和基于角色的授权背后的各种模块的集合。他们不是登录到各种较小的应用程序，而是登录一次，并拥有他们可以访问的仪表板/菜单。

用户登录
他们的角色被检索并存储在会话中
根据其角色（CRM，CMS，无管理面板等）填充大型菜单的应用程序负载

我们一直在考虑如何利用一些较新的框架（Angular，React，Vue）或者我们是否应该使用这些应用程序。

当涉及到国家管理层时，我很挣扎。我理解使用Redux和React来管理状态的想法，对于较小的组件，但如果较大的应用程序的各个部分彼此完全无关，我想知道这个状态有多复杂和多大？

使用React作为示例登录后我的根组件可能是（我不确定，因为我还不是非常熟悉React）。

const Root = () => {
  return (
    <div className="container">
      <Router history={browserHistory}>
        <Route path="/" component={dashboard}/>
        <Route path="/crm" component={crm}/>
        <Route path="/cms" component={cms}/>
        <Route path="/module1" component={module1}/>
        ...
        <Route path="/moduleN" component={moduleN}/>
      </Router>
    </div>
  )
}

ReactDOM.render(<Root />, document.getElementById('root'));

这是更好的方法，即使多条路线没有任何共同点（cms不关心crm）它们都应该共享状态，或者实际上会重新加载页面并转到更小的更集中的单页申请是首选？

例如，使用传统的服务器端逻辑将菜单显示为每个模块的不同html文件。

Answer 1

您所指的是延迟加载，它将在不同的JS文件中分解您的路由，并仅在请求时加载它们。您可以参考此链接，了解如何在vue.js中使用延迟加载

https://router.vuejs.org/en/advanced/lazy-loading.html

这是React中的一种方式（似乎不是原生的，如果我错了，请纠正我）

Dynamic loading of react components

使用React构建模块化企业应用程序？

1 个答案: