Выпущен Vue Router 4.0! Обновленный.

внешний интерфейс Vue.js

Оригинальный адрес выпуска

Сегодня Vue Router 4 официально выпустил стабильную версию.

После 14 альфа-, 13 бета- и 6 выпусков RC, Vue Router v4 уже здесь, предлагая вам интеграцию с TypeScript, новые функции и последовательные улучшения для современных приложений, готовый стать новым Vue3. Лучший компаньон для приложений.

Почти 2 года, около 1500 коммитов, 15RFC, бесчисленное количество тяжелой работы... и много помощи от пользователей, их отчетов об ошибках и запросов новых функций. Спасибо за вашу помощь!

Оптимизация структуры проекта

Vue Router теперь разделен на три модуля:

  • Реализация истории: обрабатывает адресную строку и зависит от среды, в которой работает Vue Router (узел, браузер, мобильное устройство и т. д.).
  • Сопоставитель маршрутизатора: обрабатывать что-то вроде/users/:idРазбор маршрута иприоритетная обработка.
  • Router: соединяет все вместе и обрабатывает определенные функции маршрутизации, такие как защита навигации.

динамическая маршрутизация

динамическая маршрутизация— одна из самых популярных функций Vue Router. Это делает маршрутизацию более гибкой и мощной, превращая то, что раньше было невозможно, в реальность! Vue Router4 добавилАвтоматическое ранжирование приоритетовБлагодаря расширенным возможностям анализа путей пользователи теперь могут определять маршруты в любом порядке, поскольку маршрутизаторпредполагатьМаршрут, который должен совпадать.

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

Например, вы также пишете/usersи/:w+Эти два маршрута:

const routes = [
  {
    path: '/users',
    Component: Users
  },
  {
    path: '/:w+',
    Component: NotFound
  }
]

Тогда, конечно, вы хотите ввести/usersДля этого более точного пути следуйте правилам, указанным выше, при этом нижняя часть является нижней строкой. В старой версии Vue Router для обеспечения такого поведения требовался порядок объявлений маршрутов, но в новой версии, независимо от того, как вы его разместите, он будет вычислять, какому маршруту соответствовать согласно системе подсчета очков.

даже специальноPath RankerЭта страница поможет вам рассчитать показатель приоритета маршрутизации.

В тестовом примере ssh находит более конкретныйоценка приоритетаРейтинг, вы можете почувствовать это первым:

it('works', () => {
  checkPathOrder([
    '/a/b/c',
    '/a/b',
    '/a/:b/c',
    '/a/:b',
    '/a',
    '/a-:b-:c',
    '/a-:b',
    '/a-:w(.*)',
    '/:a-:b-:c',
    '/:a-:b',
    '/:a-:b(.*)',
    '/:a/-:b',
    '/:a/:b',
    '/:w',
    '/:w+'
  ])
})

Проще говоря, чем более явным является маршрут, тем выше рейтинг, и чем он более неоднозначный, верно обратное, независимо от порядка, что очень интересно.

Улучшенная система навигации

Новая навигационная система более согласованна и улучшает поведение прокрутки, приближая его к собственному поведению браузера. Он также предоставляет пользователю почти больше информации о состоянии навигации, которую пользователь может использовать дляProgressBarиModalГлобальные элементы пользовательского интерфейса, например, для улучшения взаимодействия с пользователем.

Более мощные инструменты разработки

спасибо новыйVue Devtools, Vue Router может выполнять следующую более продвинутую интеграцию с браузерами.

  1. Лента новостейИзменения маршрутизации журнала:

时间轴记录下你的路由变化

  1. полный каталог маршрутов, чтобы упростить отладку:清晰的路由目录

улучшенная защита маршрутизации

иnextПопрощайтесь и держитесь подальше от некоторых из самых простых ошибок, которые можно совершить внутри защиты маршрута: возврат любого значения, которое вы передаете в next . Предыдущие версии по-прежнему поддерживаются для упрощения миграции!

Теперь API-интерфейс защиты маршрутизации более удобен и разумен, и его можно использовать идеально.async awaitВыполните асинхронную обработку, например:

router.beforeEach(async (to, from) => {
  // canUserAccess() returns `true` or `false`
  return await canUserAccess(to)
})

Согласованное кодирование

Метод кодирования (Encoding) был адаптирован единообразно, и теперь он будет использоваться в разных браузерах и атрибутах местоположения маршрутизации (params, queryиhash) быть последовательным. передается как параметр вrouter.push()когда вам не нужно делать какое-либо кодирование, когда вы используете$routeилиuseRoute()Когда вы переходите к получению параметров, они всегда находятся в состоянии Decoded.

Низкая стоимость миграции

Vue Router 4 в основном фокусируется на улучшении существующего маршрутизатора при сохранении очень похожего API.Если вы уже знакомы со старой версией Vue Router, ваша миграция пройдет гладко, вы можете проверить документацию.Полное руководство по миграции.

Глядя в будущее

Vue Router был стабильным и простым в использовании в течение последних нескольких месяцев, а теперь он может делать еще кое-что интересное:

  • Получите лучший опыт разработки с помощью существующих инструментов (Vetur, Vite, Devtools и т. д.).
  • Лучшая интеграция с современными функциями, такими как Suspense.
  • RFC и сообщество работают вместе над разработкой лучших API.
  • Разработка более легких версий.

попробуй

Не терпится попробовать Vue Router 4? здесь естьCodeSandbox,иШаблон Vite со встроенным CSS Tailwindили используйтеCLIчтобы начать свою игру.

Хотите узнать более продвинутые концепции Vue Router 4? Проверьте нашиновый документ. Если вы являетесь существующим пользователем Vue 2.x, перейдите непосредственно кРуководство по миграции.

Связанное Чтение

Глубоко раскрывайте суть интерфейсной маршрутизации, рукописный мини-маршрутизатор

Спасибо за внимание

Эта статья была впервые опубликована в публичном аккаунте "Передняя часть от продвинутого до допуска», нажмите «Подписаться», чтобы получить4D расширенный интерфейсный расширенный маршрут, интерфейсный алгоритм, основанный на нулевом решении выбранных проблем. вы также можете найти меняВнутренний толчок байта, много ХК!

Категории