Ответ 1
Немного поздно, но я постараюсь ответить на вопрос. Это больше архитектурный вопрос, чем просто вопрос уровня маршрутизации.
TL;DR: Вам понадобится сочетание подходов. Один подход не подходит.
1. Режим маршрутизации
Во-первых, вы должны определить, используете ли вы режим истории HTML 5 или режим хеширования. Это 2018 год, и я определенно рекомендую вам использовать режим истории HTML5.
Если вы используете режим истории, это означает, что ваш клиентский маршрутизатор должен работать синхронно с вашим серверным маршрутизатором.
2. Микро-интерфейс
Я не уверен, знаете ли вы это, но микро-интерфейс - это термин, который вы ищете. По сути, это ваша первая линия сегрегации. Вы должны разбить свое приложение на несколько небольших приложений. Каждое приложение будет иметь свой корневой компонент, маршрутизатор, модели, сервисы и т.д. Вы поделитесь многими компонентами (конечно, слово очень большое приложение важно. И я в буквальном смысле этого слова.)
3. Особенности моно-репо
Если вы решили продолжить работу с микро-интерфейсами, то вы можете рассмотреть возможность моно-репо с использованием Lerna или Builder.
4. Модуль маршрутизации - инициализация
Независимо от микро-приложений, ваше приложение должно иметь одну отправную точку - main.js или index.js. В этом файле вы должны инициализировать все ваши одиночные вещи. Основными одноэлементными объектами в типичном приложении Vue.js являются Root Component, Data Store, Router и т.д.
Ваш модуль маршрутизации будет отделен от любого компонента. Импортируйте модуль маршрутизации в этот файл ввода и инициализируйте его здесь.
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. Маршрутный модуль - Guard
Это очень важно Стражи - это то место, где вы должны обрабатывать свое разрешение. С помощью 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-router-sync. Делая это, вы сохраните болезненное количество ошибок.
8. Модуль маршрутизации - Побочные эффекты
Вы часто будете использовать $router.replace() или $router.push() в своих компонентах. С точки зрения компонентов это побочный эффект. Вместо этого обрабатывайте программную навигацию маршрутизатора за пределами вашего компонента. Создайте центральное место для всей навигации маршрутизатора. Отправьте запрос/действие этой внешней сущности, чтобы обработать эти побочные эффекты для вас. TL;DR; Не делайте побочный эффект маршрутизации непосредственно в ваших компонентах. Это сделает ваши компоненты твердыми и простыми в тестировании. В нашем случае мы используем наблюдаемую избыточность для обработки побочных эффектов маршрутизации.
Я надеюсь, что это охватывает все аспекты маршрутизации для очень масштабного приложения.