Немного поздно, но я постараюсь ответить на вопрос. Это больше архитектурный вопрос, чем просто вопрос уровня маршрутизации.
TLDR: Вам понадобится сочетание подходов. Один подход не подходит.
1. Режим маршрутизации
Во-первых, вы должны определить, собираетесь ли вы использовать Режим истории HTML 5 или режим хэширования
Это 2018 год, и я определенно рекомендую использовать режим истории HTML5.
Если вы используете режим истории, это означает, что ваш клиентский маршрутизатор должен работать синхронно с вашим серверным маршрутизатором.
2. Micro-оболочки
Я не уверен, знаете ли вы это, но микро-интерфейс - это термин, который вы ищете. По сути, это ваша первая линия сегрегации. Вы должны разбить свое приложение на несколько небольших приложений. Каждое приложение будет иметь свой корневой компонент, маршрутизатор , модели, сервисы и т. Д. Вы поделитесь многими компонентами (Конечно, слово очень большое приложение важно. И я буквально имею в виду она.)
3. Особенности моно-репо
Если вы решили использовать микро-интерфейсы, вы можете рассмотреть моно-репо
используя Лерну или Строителя.
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. Модуль маршрутизации - 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() в своих компонентах. С точки зрения компонентов это побочный эффект. Вместо этого обрабатывайте программную навигацию маршрутизатора за пределами вашего компонента. Создайте центральное место для всей навигации маршрутизатора. Отправьте запрос / действие этой внешней сущности, чтобы обработать эти побочные эффекты для вас. TLDR; Не делайте побочный эффект маршрутизации непосредственно в ваших компонентах. Это сделает ваши компоненты твердыми и простыми в тестировании. В нашем случае мы используем наблюдаемую избыточность для обработки побочных эффектов маршрутизации.
Надеюсь, это охватывает все аспекты маршрутизации для очень большого масштабного приложения.