Какая лучшая практика Vue-Router для очень крупных веб-приложений?

Я должен сделать веб-приложение со множеством различных модулей (например, todo-module, document-modules и большой модуль управления пользователями для пользователей admin). Общее количество страниц> 100. И доступ к модулю для каждого пользователя различен.

Я работаю с Laravel и Vue-router.

Но какова наилучшая практика?

  1. Создайте SPA-приложение с 1 большим vue-router для всего?
  2. Для каждого модуля имеется отдельный "SPA" (с собственным vue-маршрутизатором)?
  3. Или другое предложение...?

Ответ 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; Не делайте побочный эффект маршрутизации непосредственно в ваших компонентах. Это сделает ваши компоненты твердыми и простыми в тестировании. В нашем случае мы используем наблюдаемую избыточность для обработки побочных эффектов маршрутизации.

Я надеюсь, что это охватывает все аспекты маршрутизации для очень масштабного приложения.

Ответ 2

Если вы идете с помощью SPA-приложения, убедитесь, что вы используете эти методы:

  1. Ленивые компоненты загрузки/асинхронности. Обычно мы используем ленивую загрузку для статических активов. В том же духе нам нужно загружать компоненты только при посещении маршрутов. Vue запускает только заводскую функцию, когда компонент должен быть отображен, и будет кэшировать результат для будущих повторных рендеров.
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 }
]
  1. Объединение маршрутов: (связанное с выше) Например, в следующем случае два маршрута выводятся в одном и том же фрагменте и пакете, заставляя этот пакет быть ленивым при загрузке любого маршрута.
const Page1 = r => require.ensure([], () => r(require('./routes/Page1.vue')), 'big-pages')  
const Page2 = r => require.ensure([], () => r(require('./routes/Page2.vue')), 'big-pages')

Ответ 3

Nuxt может помочь вам в этом. Он динамически создает вашу папку Structur в конфигурационном файле маршрутизатора. Посмотрите на https://nuxtjs.org/guide/routing

Он имеет еще больше функций поддержки, чем маршрутизация. Но особенно для больших приложений вообще идея установить на nuxt

Ответ 4

Я не могу сказать наверняка, это было бы

... лучшая практика Vue-Router для очень больших веб-приложений

но это способ использования небольшого вспомогательного файла, где у нас есть сотни ссылок на маршруты:

SO # 54519946/742030