问对于非常大的the应用程序，什么是最好的Vue-路由器实践？

EN

有点晚了，但我会试着回答这个问题。这更多地是一个架构问题，而不仅仅是路由级别问题。

TLDR:您需要多种方法。有一种方法不合适。

1.路由模式

首先，您应该确定是否要使用HTML 5历史记录模式或哈希模式 --它是2018年，我绝对建议您使用HTML5历史记录模式。

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

2.微锋

我不确定你是否知道这一点，但微锋是你正在寻找的术语。基本上，这是你的第一道种族隔离。您应该将应用程序分成多个较小的应用程序。每个应用程序都有自己的根组件、路由器、模型、服务等。您将共享许多组件(当然，word 非常大的应用程序很重要。我是认真的。)

3.单回购考虑因素

如果您选择继续使用微前端，那么您可以考虑使用单回购装置或Builder。

4.路由模块-初始化

不管是什么微型应用程序，你的应用程序都应该有一个起点-- main.js或index.js。在这个文件中，您应该初始化所有的单例对象。在一个典型的Vue.js应用程序中，主要的单例实体是根组件、Data 、路由器等。

您的路由模块将与任何组件分离。导入这个入口文件中的路由模块，并在这里初始化它。

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或卷轴这样的捆绑器。

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),
        ]
    });
}

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

6.路由模块-默认路由

记住要定义一个默认的所有捕获路由，以便向用户显示通用/智能404消息。

7.路由模块-路由数据

由于我们讨论的是非常大的应用程序，所以最好避免直接访问组件中的路由器。相反，保持您的路由器数据与您的数据存储同步，如vuex-路由器同步。通过这样做，您可以节省大量的bug。

8.路由模块-副作用

您将经常在组件中使用$router.replace()或$router.push()。从组件的角度来看，这是一个副作用。相反，处理组件外部的编程路由器导航。为所有路由器导航创建一个中心位置。向这个外部实体发送一个请求/操作，以便为您处理这些副作用。TLDR；不要在组件中直接执行路由副作用。它将使您的组件坚实和易于测试。在我们的例子中，我们使用可观察的redux处理路由副作用。

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

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

1. 延迟加载/异步组件。我们通常对静态资产进行延迟加载。本着同样的精神，我们只需要在访问线路时加载组件。Vue只在组件需要呈现时才触发工厂函数，并将缓存结果以供将来重新呈现。

从‘./ MainPage /MainPage.vue’const Page1 =r => require.ensure([]，() => r(=>(‘./=>/Page1.vue’))导入const路由={ path：'/main'，组件: MainPage }，{ path：‘/ Page1 1’，组件:Page1}

1. 组合路由:例如，在下面的情况下，在相同的块和包中输出两个路由，导致在访问任何一个路由时该包被延迟加载。

const Page1 =r => require.ensure([]，() => r(require('./routes/Page1.vue'))，const Page2 =r => require.ensure([]，() => r(需要量(‘./require.ensure/page2.vue’))，‘大页’)

努克斯特可以帮你解决这个问题。它动态地将文件夹结构生成为路由器配置文件。看看https://nuxtjs.org/guide/routing

它比路由具有更多的帮助功能。但是，特别是对于大型应用程序来说，这是一个在nuxt上设置的想法。