vue-router Некоторые точки знаний, которые легко упустить из виду

Vue.js

Эта статья предназначена для разработчиков, имеющих некоторое представление о Vue.js и vue-router.

Если не указано иное, версия vue-router — 3.0.2.

текст

  • сопоставление класса маршрута

    <router-link>После сопоставления маршрута к метке будет добавлено значение атрибута класса..router-link-active, эта функция очень удобна при вложенной маршрутизации

    Фактическое значение атрибута класса может быть передано черезactive-classДля управления глобальным значением по умолчанию является параметр построения маршрута.linkActiveClassконтролировать

    По умолчанию все родители текущего маршрута добавляются по умолчанию.active-class, который в настоящее время находится в/user/1выдаст текущую страницу<router-link to="/">Добавить кactive-class, если это не требуется, дайте<router-link>Добавить кexactТо есть точно соответствующий класс передается черезexact-active-classконтроль

    Пример:JSFiddle

  • Маршрутизация с подстановочными знаками

    Конфигурация маршрутизации:{path: '/user-*'},доступ/user-adminмаршрутизация, доступная по адресу$route.params.pathMatchполучать'admin'(только pathMatchvue-router@3.0.2+Доступно, используйте ниже этой версии$route.params[0]попытаться получить)

    Пример:JSFiddle

    Документация:Поймать все маршруты или 404 Не найденные маршруты

  • Маршрутизация расширенных шаблонов сопоставления

    использование vue-маршрутизатораpath-to-regexpВ качестве механизма сопоставления маршрутов библиотека может генерировать регулярное выражение, соответствующее правилам через входной путь, чтобы реализовать функцию сопоставления маршрутов.

    path-to-regexpметоды, обычно используемые вpathToRegexp(path, keys, options)Третий параметрpathToRegexpOptionsкомпилировать обычные варианты, вvue-router@2.6.0+версия может быть настроенаrouteизpathToRegexpOptionsПараметры добавляют дополнительные параметры.

    Ссылаться например, через который можно пройти'/optional-params/:foo?'реализация необязательнаparam, также через'/params-with-regex/:id(\\d+)'Внедряйте только совпадающие номераparam(Неудачные маршруты сопоставляются в обратном порядке).

    pathToRegexpOptionsСодержание:

    • sensitiveс учетом регистра (по умолчанию: false)
    • strictЯвляется ли завершающая косая черта точным совпадением (по умолчанию: false)
    • endглобальное совпадение (по умолчанию: true)
    • startРасширить совпадение с начальной позиции (по умолчанию: true)
    • delimiterуказать другой разделитель (по умолчанию: '/')
    • endsWithОпределяет стандартный конечный символ
    • whitelistУкажите список разделителей (по умолчанию: не определено, любой символ)

    Исходный код:vue-router/src/create-route-map.js:154Документация:Расширенный режим матча

  • Обработка хуков для программной навигации

    существуетvue-router@2.2.0+, опционально вrouter.pushилиrouter.replaceдоступно вonCompleteа такжеonAbortОбратные вызовы в качестве второго и третьего аргументов. Эти обратные вызовы будут вызываться соответственно, когда навигация завершается успешно (после разрешения всех асинхронных перехватчиков) или завершается (переход к тому же маршруту или переход к другому маршруту до завершения текущей навигации). Эту функцию можно использовать в нескольких сценариях со скрытыми точками без настройки сложных перехватчиков маршрутизации.

  • перенаправление маршрута

    ДатьrouteнастроитьredirectАтрибут позволяет перенаправить маршрут на указанный маршрут Этот атрибут поддерживаетString/Object/FunctionТри типа значений, гдеFunctionПараметрыtoобъект

    Добавить к перенаправленному промежуточному маршрутуbeforeEachа такжеbeforeLeaveне получится, дайrouterДобавленный хук не может определить это перенаправление, если вам нужно определить источник перенаправления, вы можете использовать объект маршрутизации$route.redirectedFromсудить

    Эта функция подходит для маршрутизацииpathПеренаправить, чтобы сохранить исходный маршрут после модификации

    Документация:перенаправить

  • Вложенные именованные представления

    При отображении нескольких представлений на уровне (одно представление использует несколько уровней<router-view>), который можно использовать<router-view>изname prop Например, вsidebar/listНа странице макета вам не нужно писать логику многих подкомпонентов в контейнере родительского представления. Вам нужно только настроить соответствующие компоненты страницы в конфигурации маршрутизации, чтобы отделить взаимосвязь компонентов и эффективно контролировать рендеринг подвидов.

    пример:JSFiddle

    Документация:Вложенные именованные представления

  • Плиние маршрута

    ДатьrouteнастроитьaliasНедвижимость может оставить посетителей такими, какие они естьurlНо доступ к указанному маршруту.

    Это свойство поддерживаетStringа такжеArrayдва типа, когдаaliasКогда он дублируется с другими маршрутами, маршрут, объявленный первым, имеет преимущественную силу, а псевдоним не будет соответствовать классу маршрута.

    Документация:псевдоним

  • Параметры передачи компонента маршрута

    Эта функция предназначена для отделения компонентов от маршрутизации, что даетrouteнастроитьprops: trueПри этом внутри компонентаpropsнастроить сpramsК одной и той же переменной можно получить доступ напрямую черезpropsне проходя через$route.paramsдля доступа к параметрам

    еслиpropsявляется объектом, содержимое объекта будет передано в компонент как статическое содержимое, какprops

    когдаpropsэто функция, которая получаетrouteпараметры, можно сделатьqueryтак какpropsПередать компоненты или реализовать более продвинутую функциональность

    Документация:Параметры передачи компонента маршрута

  • Полный процесс анализа навигации

    1. Навигация запущена.
    2. Вызвать охрану выхода в деактивированном компоненте.
    3. Вызов глобального охранника перед каждым.
    4. Вызовите защиту beforeRouteUpdate (vue-router@2.2+) в повторно используемом компоненте.
    5. Вызовите beforeEnter в конфигурации маршрутизации.
    6. Разобрать компоненты асинхронной маршрутизации.
    7. Вызовите beforeRouteEnter для активированного компонента.
    8. Вызвать глобальную защиту beforeResolve (vue-router@2.5+).
    9. Навигация подтверждена.
    10. Вызовите глобальный хук afterEach.
    11. Запустить обновление DOM.
    12. Вызовите функцию обратного вызова, переданную next в стороже beforeRouteEnter с созданным экземпляром.

    Документация:Полный процесс анализа навигации

  • поведение при прокрутке

    Создайте экземпляр маршрутизатора, вы можете предоставитьscrollBehaviorметод, который получаетto,from,savedPosition(Исходное значение xy страницы доступно только в прямом и обратном направлении через браузер)

    возврат в этом методе{selector:to.hash}Также может быть реализовано поведение, подобное «прокрутке до привязки»,vue-router@2.6.0+также вернуться{offset?:{x,y}}Сместите положение, обратите внимание, что отрицательное значение смещения смещено в отрицательном направлении.

    Это异步滚动Обычно используется для нишевых компонентов перехода (перехода) и поведения прокрутки одновременно, официальный пример не дает много актуальной информации

    Документация:поведение при прокрутке

  • Отложенная загрузка компонентов — фрагментация по группам

    SPA (одностраничное приложение) благодаря характеристикам All in JS замедляет загрузку первого экрана. Многие рекомендуют использовать функцию разделения кода Webpack для уменьшения размера одного JS. Когда все компоненты страницы используют динамические при загрузке запрос страницы будет перегружен, выигрыш перевешивает выигрыш, поэтому компоненты складываются в группы:

      const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
  const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
  const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

    Эта функция требуетwebpack@2.4+служба поддержки

    Документация:Блокировать компоненты в группы

  • Получить компонент сопоставления маршрутов

    router.getMatchedComponents(location?)

    Эта функция может получить массив объектов маршрутизации, которым входящие параметры соответствуют в таблице маршрутизации.В официальной документации написано, что она обычно используется при предзагрузке данных рендеринга на стороне сервера, а также может использоваться для получения текущий массив объектов маршрутизации.

    Если вам нужно получить текущую запись маршрута (то есть копию объекта в массиве конфигурации маршрутов опции построения маршрута, включая дочерний массив), вы можете использоватьroute.matched

    Документация:getMatchedComponentsДокументация:$route.matched

  • Анализ маршрута

    router.resolve(location, current?, append?)

    Эта функция также экспортируетlocationобъект и запись маршрута, которая соответствуетresolved, если нет соответствующего объекта,resolvedПоле по умолчанию возвращает компонент 404 или данные об ошибке.

    Документация:router.resolve

  • добавить маршрут

    router.addRoutes(routes:Array<RouteConfig>)

    Эта функция может быть запущена пользователем для добавления маршрута в таблицу маршрутизации, вы можете попробовать использовать ее в контроле разрешений пользователей.

    Документация:router.addRoutes

предложение

  • Логика перехода маршрутизации простой кнопки не используетсяv-on:clickсобытие, использование<router-link>Этикетка.

  • Если путь размещения SPA находится в подкаталоге доменного имени, не изменяйте конфигурацию веб-пакета в соответствии с некоторыми руководствами по сети, вам следует изменитьRouter 构建选项серединаbaseзначение, которое может избежать некоторых ненужных проблем

  • не пытайтесь изменить$routeСодержание этого свойства только для чтения, а свойство внутриimmutableстатус, но вы можетеwatchэто

использованная литература

  1. Регулярное выражение для URL: path-to-regexp - Ищет программист
  2. vue-router Document
  3. vue-router Source Code

Начальный адрес этой статьи

blog.shoyuf.top

Это первый раз, когда я разместил статью о Наггетс. Добро пожаловать, чтобы плюнуть и поправить меня в области комментариев.

Категории