Я должен сделать веб-приложение со множеством различных модулей (например, todo-module, document-modules и большой модуль управления пользователями для пользователей admin). Общее количество страниц> 100. И доступ к модулю для каждого пользователя различен.
Я работаю с Laravel и Vue-router.
Но какова наилучшая практика?
Немного поздно, но я постараюсь ответить на вопрос. Это больше архитектурный вопрос, чем просто вопрос уровня маршрутизации.
TL;DR: Вам понадобится сочетание подходов. Один подход не подходит.
Во-первых, вы должны определить, используете ли вы режим истории HTML 5 или режим хеширования. Это 2018 год, и я определенно рекомендую вам использовать режим истории HTML5.
Если вы используете режим истории, это означает, что ваш клиентский маршрутизатор должен работать синхронно с вашим серверным маршрутизатором.
Я не уверен, знаете ли вы это, но микро-интерфейс - это термин, который вы ищете. По сути, это ваша первая линия сегрегации. Вы должны разбить свое приложение на несколько небольших приложений. Каждое приложение будет иметь свой корневой компонент, маршрутизатор, модели, сервисы и т.д. Вы поделитесь многими компонентами (конечно, слово очень большое приложение важно. И я в буквальном смысле этого слова.)
Если вы решили продолжить работу с микро-интерфейсами, то вы можете рассмотреть возможность моно-репо с использованием Lerna или Builder.
Независимо от микро-приложений, ваше приложение должно иметь одну отправную точку - main.js или index.js. В этом файле вы должны инициализировать все ваши одиночные вещи. Основными одноэлементными объектами в типичном приложении Vue.js являются Root Component, Data Store, Router и т.д.
Ваш модуль маршрутизации будет отделен от любого компонента. Импортируйте модуль маршрутизации в этот файл ввода и инициализируйте его здесь.
Модуль маршрутизации должен быть далее разделен на более мелкие модули. Используйте для этого простые функции и модули 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.
Это очень важно Стражи - это то место, где вы должны обрабатывать свое разрешение. С помощью 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),
]
});
}
Теперь вы можете просто вызвать эту функцию из вашего файла точки входа.
Не забудьте определить маршрут по умолчанию для всех сообщений, чтобы показать общее/интеллектуальное сообщение 404 для ваших пользователей.
Поскольку мы действительно говорим об очень больших приложениях, лучше избегать прямого доступа к маршрутизатору внутри вашего компонента. Вместо этого синхронизируйте данные маршрутизатора с хранилищем данных, например vuex-router-sync. Делая это, вы сохраните болезненное количество ошибок.
Вы часто будете использовать $router.replace() или $router.push() в своих компонентах. С точки зрения компонентов это побочный эффект. Вместо этого обрабатывайте программную навигацию маршрутизатора за пределами вашего компонента. Создайте центральное место для всей навигации маршрутизатора. Отправьте запрос/действие этой внешней сущности, чтобы обработать эти побочные эффекты для вас. TL;DR; Не делайте побочный эффект маршрутизации непосредственно в ваших компонентах. Это сделает ваши компоненты твердыми и простыми в тестировании. В нашем случае мы используем наблюдаемую избыточность для обработки побочных эффектов маршрутизации.
Я надеюсь, что это охватывает все аспекты маршрутизации для очень масштабного приложения.
Если вы идете с помощью SPA-приложения, убедитесь, что вы используете эти методы:
import MainPage from './routes/MainPage.vue' const Page1 = r => require.ensure([], () => r(require('./routes/Page1.vue'))) const routes = [ { path: '/main', component: MainPage }, { path: '/page1', component: Page1 } ]
const Page1 = r => require.ensure([], () => r(require('./routes/Page1.vue')), 'big-pages') const Page2 = r => require.ensure([], () => r(require('./routes/Page2.vue')), 'big-pages')
Nuxt может помочь вам в этом. Он динамически создает вашу папку Structur в конфигурационном файле маршрутизатора. Посмотрите на https://nuxtjs.org/guide/routing
Он имеет еще больше функций поддержки, чем маршрутизация. Но особенно для больших приложений вообще идея установить на nuxt
Я не могу сказать наверняка, это было бы
... лучшая практика Vue-Router для очень больших веб-приложений
но это способ использования небольшого вспомогательного файла, где у нас есть сотни ссылок на маршруты: