Laravel 对于非常大的 Web 应用程序，最好的 VueRouter 实践是什么

Little late but I will try to answer the question. This is more an architectural question than just routing level question.

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

1.路由模式

First, you should determine if you are going with HTML 5 history mode or hash mode It is 2018, and I definitely recommend that you use HTML5 history mode.

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

2.微型前锋

我不确定你是否知道这一点，但micro-frontends是你正在寻找的术语.基本上，这是你的第一条隔离线.你应该把你的应用分成多个较小的apply.每个应用程序都有其根组件router、模型、服务等.您将共享许多组件(当然，word very large应用程序很重要.我是认真的.)

3.单一回购考虑事项

If you have chosen to go ahead with Micro-frontends, then you might consider mono-repo setup using Lerna or Builder.

4. Routing Module - Initialization

无论微应用如何，你的应用都应该有一个起点——main.js或index.js.在这个文件中，您应该初始化所有的单例内容.典型Vue中的主要单例实体.js应用程序有Root Component、Data Store、Router等.

您的路由模块将与任何组件分离.在该条目文件中导入路由模块，并在此处进行初始化.

5.路由模块-实施

Routing module should be further split into smaller modules. Use simple functions and ES modules to do that. Each function will be responsible for returning a RouteConfig object. This is how it will look:

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
    };
}

You cannot do this unless you use bundler like Webpack or Rollup.

5. Routing Module - Guard

This is very important

我假设您正在为非常大的应用程序使用某种类型的数据存储，如Redux或Vuex.如果您要编写路由级别保护，那么您将需要参考Redux/Vuexstore 的数据来做出授权决策.这意味着您需要将存储注入到路由模块中.要做到这一点，最简单的方法是将路由初始化封装到如下函数中:

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

Now you can simply call this function from your entry-point file.

6. Routing Module - Default route

Remember to define a default catch-all route to show generic/intelligent 404 message to your users.

7.路由模块-路由数据

Since we are really talking about very large application, it is better to avoid direct access to a router within your component. Instead, keep your router data in sync with your data store like vuex-router-sync . You will save the painful amount of bugs by doing this.

8. Routing Module - Side effects

You will often use $router.replace() or $router.push() within your components. From a component perspective, it is a side effect. Instead, handle programmatic router navigation outside of your component. Create a central place for all router navigation. Dispatch a request/action to this external entity to handle these side effects for you. TLDR; Don't do routing side effect directly within your components. It will make your components SOLID and easy to test. In our case, we use redux-observable to handle routing side effects.

I hope this covers all the aspects of routing for a very large scale application.