Laravel 对于非常大的Web应用程序，Vue路由器的最佳实践是什么？

我必须用许多不同的模块（如todo模块、文档模块和管理员用户的大用户管理模块）制作一个Web应用程序。总页数>100页。每个用户的模块访问权限也不同

我正在使用Laravel和Vue路由器

但是，做这件事的最佳做法是什么

创建一个SPA应用程序，每个应用程序都有一个大型vue路由器

每个模块都有一个单独的“SPA”（带和自己的vue路由器）

还是另一个建议

---

如果您使用SPA应用程序，请确保您正在使用以下实践：

延迟加载/异步组件。我们通常对静态资产进行延迟加载。本着同样的精神，我们只需要在访问路由时加载组件。Vue仅在需要渲染组件时触发factory函数，并将缓存结果以备将来重新渲染

组合路由：（与上面相关）例如，在以下情况下，在同一块和包中输出两条路由，导致在访问任一路由时延迟加载该包

---

Nuxt可以帮你。它会将文件夹结构动态生成到路由器配置文件。看看

---

它甚至比路由具有更多的帮助功能。但特别是对于大型应用程序，一般来说，在nuxt上设置的想法有点晚，但我将尝试回答这个问题。这更像是一个架构问题，而不仅仅是路由级别的问题

TLDR:您将需要多种方法的混合。一种方法不合适

1.路由模式 首先，你应该决定你是否要和他一起去 2018年，我绝对建议您使用HTML5历史模式

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

2.微前端 我不知道你是否知道这一点，但这是你正在寻找的术语。基本上，这是你的第一条隔离线。您应该将应用程序拆分为多个较小的应用程序。每个应用程序都有其根组件，路由器、模型、服务等。您将共享许多组件（当然，单词非常大的应用程序很重要。我是认真的。）

3.单一回购考虑因素 <>如果你选择了微前端，那么你可以考虑 使用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这样的绑定器，否则无法执行此操作

5.路由模块-保护 这非常重要 警卫是你应该处理授权的地方。使用Vue.js，可以编写组件级路由保护但我的建议是不要这样做。只有在绝对必要的时候才这样做。这基本上是一种关注的分离。您的路由模块应具备应用程序授权的知识。从技术上讲，授权存在/适用于路线，而不是组件。这就是为什么我们将路由创建为一个单独的模块

我假设您正在为非常大的应用程序使用某种类型的数据存储，如Redux或Vuex。如果要编写路由级防护，则需要咨询Redux/Vuex存储区的数据，以做出授权决策。这意味着您需要将存储注入路由模块。最简单的方法是将路由器初始化封装到如下函数中：

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

导出函数makeRouter（store:store）。这样做可以避免大量的错误

8.路由模块-副作用
您将经常使用
$router.replace（）
或
$router.push（）
在组件内部。从组件的角度来看，这是一个副作用。相反，在组件外部处理程序化路由器导航。为所有路由器导航创建一个中心位置。向此外部实体发送请求/操作以为您处理这些副作用。不要直接在您内部处理路由副作用r组件。它将使您的组件坚固且易于测试。在我们的例子中，我们使用redux observable来处理路由的副作用

我希望这涵盖了规模非常大的应用程序路由的所有方面。
让我们讨论一下：当使用多个路由器时，在模块之间切换时会不会更慢？嘿，angelique000，我已经从处理使用Vue.JS构建的大规模JS应用程序的方式中提取了队列，然后更新了答案。请让我知道它是否对您有任何帮助。您好，单个应用意味着您可以按模块使用应用程序？这意味着您必须单独托管应用程序？如果这是正确的，您如何在路由和状态管理方面将一个应用程序与另一个应用程序连接？谢谢
function getLazyWelcomeRoute(): RouteConfig {

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

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

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