laravel - 对于大型Web应用程序，最佳Vue-Router最佳实践是什么？

Question

我必须使Web应用程序具有许多不同的模块(例如todo模块，documents模块和admin用户的大usermanagement模块)。页面总数>100。每个用户的模块访问权限都不同。

我正在使用 Laravel 和 Vue-router 。

但是，最佳做法是什么呢？

创建SPA应用程序，并使用1个大型vue-router进行所有处理？

每个模块都有一个单独的“SPA”(带有自己的vue-router)吗？

还是其他建议...？

Answer 1

来晚了，但我会尽力回答这个问题。这不仅仅是路由级别的问题，更是架构问题。

TLDR: You will need a mix of approaches. One approach won't fit.

1.路由模式

首先，您应该确定是否要使用 HTML 5 history mode or hash mode
现在是2018年，我绝对建议您使用HTML5历史记录模式。

如果使用历史记录模式，则意味着客户端路由器将需要与服务器路由器同步工作。

2.微型前端

我不确定您是否知道这一点，但是 micro-frontends是您要查找的术语。基本上，这是您的第一线隔离。您应该将您的应用拆分为多个较小的应用。每个应用程序都有其根组件 路由器，模型，服务等。您将共享许多组件(当然，单词 很大的应用程序很重要。我的意思是它。)

3. Mono-repo注意事项

如果您选择继续使用微前端，则可以考虑使用 mono-repo setup
使用Lerna或Builder。

4.路由模块-初始化

与微型应用程序无关，您的应用程序应具有一个起点- main.js或 index.js。在此文件中，您应该初始化所有单例内容。在典型的Vue.js应用程序中，主要的单例实体是 根组件， 数据存储， 路由器等。

您的路由模块将与任何组件分开。在该入口文件中导入路由模块并在此处对其进行初始化。

5.路由模块-实现

路由模块应进一步分为较小的模块。使用简单的功能和ES模块即可。每个函数将负责返回 RouteConfig对象。它是这样的:

const route: RouteConfig = {
    path: '/some-path',
    component: AppComponent,
    children: [
        getWelcomeRoute(),
        getDashboardRoute()
    ]
};

function getWelcomeRoute(): RouteConfig {
    return {
        name: ROUTE_WELCOME,
        path: '',
        component: WelcomeComponent
    };
}

在路由级别，您应该考虑对模块进行延迟加载。这将节省很多字节，无需预先加载:

function getLazyWelcomeRoute(): RouteConfig {

    // IMPORTANT for lazy loading
    const LazyWelcomeComponent = () => import('views/WelcomeComponent.vue');

    return {
        name: ROUTE_WELCOME,
        path: '',
        component: LazyWelcomeComponent
    };
}

除非您使用Webpack或Rollup等 bundle 程序，否则您无法执行此操作。

5.路由模块-防护

这很重要
警卫是您应处理授权的地方。使用Vue.js，可以编写组件级路由防护。 但我的建议是不要这样做。仅在绝对必要时执行此操作。这基本上是关注点分离。您的路由模块应具备应用授权的知识。从技术上讲，授权比组件存在/应用于路由。这就是为什么我们将路由创建为一个单独的模块的原因。

我假设您正在为大型应用程序使用某种数据存储，例如Redux或Vuex。如果要编写路由级别防护，则需要引用Redux / Vuex存储中的数据来做出授权决策。这意味着您需要将存储注入(inject)路由模块。最简单的方法是将路由器初始化包装成如下功能:

export function makeRouter(store: Store<AppState>): VueRouter {
    // Now you can access store here
    return new VueRouter({
        mode: 'history',
        routes: [
            getWelcomeRoute(store),
        ]
    });
}

现在，您可以简单地从入口点文件中调用此函数。

6.路由模块-默认路由

记住要定义默认的全部路由，以向用户显示通用/智能404消息。

7.路由模块-路由数据

由于我们实际上是在谈论 非常大的应用程序，因此最好避免直接访问组件中的路由器。而是将路由器数据与 vuex-router-sync等数据存储区保持同步。通过这样做，您将节省大量的错误。

8.路由模块-副作用

您通常会在组件中使用 $router.replace()或 $router.push()。从组件的 Angular 来看，这是一个副作用。而是在组件外部处理程序化路由器导航。为所有路由器导航创建一个中心位置。向此外部实体发送请求/操作，以为您处理这些副作用。 TLDR；不要直接在您的组件内部进行路由副作用。这将使您的组件牢固且易于测试。在我们的例子中，我们使用redux-observable处理路由副作用。

我希望这涵盖了 非常大的规模应用程序的路由的所有方面。