Метод router.resolve

Метод router.resolve используется для получения информации о маршруте без фактической навигации по нему. Это особенно полезно, когда требуется программно вычислить URL, проверить соответствие маршруту или получить объект маршрута для дальнейшей обработки.

Синтаксис

const resolved = router.resolve(location, currentLocation, append);

Параметры:

  • location — объект или строка, указывающая маршрут, который нужно разрешить. Может быть строкой URL, объектом с полями { name, params, query, hash } или массивом.
  • currentLocation — текущий маршрут, относительно которого будет разрешён новый путь. Используется для вычисления относительных маршрутов. По умолчанию берется текущий маршрут.
  • append — логическое значение, которое указывает, следует ли добавлять путь к текущему маршруту (актуально для вложенных маршрутов).

Возвращаемое значение

Метод возвращает объект с ключевыми свойствами:

  • href — строка URL, которая будет использоваться для навигации. Поддерживает как абсолютные, так и относительные пути.
  • route — объект маршрута, аналогичный объекту, возвращаемому router.currentRoute. Включает path, name, params, query, hash, matched.
  • location — нормализованный объект location, который можно передать в другие методы навигации (router.push или router.replace).

Примеры использования

Разрешение строки URL:

const resolved = router.resolve('/about');
console.log(resolved.href); // '/about'
console.log(resolved.route.path); // '/about'

Разрешение маршрута с именем и параметрами:

const resolved = router.resolve({
  name: 'user',
  params: { id: 42 }
});
console.log(resolved.href); // '/user/42'
console.log(resolved.route.params); // { id: 42 }

Использование с query-параметрами и хэшем:

const resolved = router.resolve({
  path: '/search',
  query: { q: 'vue' },
  hash: '#top'
});
console.log(resolved.href); // '/search?q=vue#top'
console.log(resolved.route.query); // { q: 'vue' }
console.log(resolved.route.hash); // '#top'

Особенности работы

  1. Относительные маршруты Если currentLocation задан, router.resolve корректно вычисляет относительные пути относительно этого маршрута. Это позволяет динамически создавать ссылки внутри вложенных маршрутов без ручного сложения строк.

  2. Совместимость с объектами и строками Метод одинаково корректно обрабатывает как строки URL, так и объекты маршрутов с параметрами, query и hash.

  3. Не вызывает переход В отличие от router.push или router.replace, router.resolve не изменяет текущий маршрут. Оно лишь вычисляет итоговый путь и объект маршрута.

  4. Поддержка вложенных маршрутов При использовании вложенных маршрутов метод учитывает конфигурацию children и правильно формирует matched массив, который отражает все уровни маршрута.

Практическое применение

  • Генерация ссылок для компонентов навигации: router.resolve позволяет создавать корректные href для <a> тегов, не вызывая перехода.
  • Валидация маршрутов: можно проверить, существует ли маршрут с определенными параметрами до выполнения router.push.
  • Создание относительных ссылок внутри динамических компонентов: особенно удобно при работе с вкладками, панелями и вложенными маршрутами.

Пример динамической генерации ссылок

const links = [
  { name: 'home' },
  { name: 'user', params: { id: 1 } },
  { path: '/about' }
];

const hrefs = links.map(link => router.resolve(link).href);
// ['/','/user/1','/about']

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

Оглавление