"Открытие ссылки в новой вкладке с помощью vue-router"

Быстрый ответ

Во Vue.js не предусмотрена встроенная функция vue-router для открытия ссылок в новой вкладке. Вместо этого вы можете использовать обычный тег <a>, комбинированный с Vue-системой привязывания данных. Свойство href должно быть связано с URL, на который вы хотите ссылаться, а атрибут target необходимо задать в значение "_blank". В итоге код будет выглядеть примерно так:

<a :href="computedUrl" target="_blank">Открыть ссылку</a>

Здесь computedUrl — это вычисляемое свойство, возвращающее URL в формате строки. Таким образом, ваша ссылка будет функционировать как стандартная HTML-гиперссылка, но с использованием реактивности Vue.

Программно заданное перенаправление в новую вкладку

Если вам требуется программно открыть новую вкладку, учтя определённые условия, vue-router не предлагает эту возможность напрямую. Но достичь цели поможет комбинация this.$router.resolve и window.open.

В случае с Composition API аналог this.$router можно получить через хук useRouter. Пример применения:

methods: {
  openInNewTab(routeName, routeParams, routeQuery) {
    const routeData = this.$router.resolve({
      name: routeName,
      params: routeParams,
      query: routeQuery
    });
    window.open(routeData.href, '_blank');
  }
}

Также для Composition API:

import { useRouter } from 'vue-router';

setup() {
  const router = useRouter();
  const openInNewTab = (routeName, routeParams, routeQuery) => {
    const routeData = router.resolve({
      name: routeName,
      params: routeParams,
      query: routeQuery
    });
    window.open(routeData.href, '_blank');
  };
  return { openInNewTab };
}

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

Добавление метода open в прототип Vue Router

Еще одна альтернатива — добавить метод open в прототип Vue Router:

Router.prototype.open = function(routeDetails) {
  const routeData = this.resolve(routeDetails);
  window.open(routeData.href, '_blank');
};

Затем его можно вызвать в компонентах так: @click="$router.open({ name: 'routeName' })".

Это нестандартные решения, ведь Vue Router изначально не подразумевает открытие вкладок через API. Следите за обновлениями и лучшими практиками на странице обсуждений GitHub.

Визуализация

Определённый аналог между vue-router и GPS-навигатором можно провести:

MainWindow (🎮): ваше текущее положение.

New Tab (🚀): пункт назначения.

Метод открытия новой вкладки — это выбор нового маршрута:

window.open('/your-route', '_blank');

Ваше Vue-приложение (🎮) находится в текущем месте, а новая вкладка (🚀) открывается тогда, когда вы определяете, куда она должна переместиться.

Vue-router «из коробки» не умеет открывать новые вкладки, но window.open позволяет выполнить данное действие.

Использование <router-link> для открытия новых вкладок без применения JS

С версии Vue Router 3.0.1 <router-link> может работать совместно с target="_blank" для открытия вкладок как vue-router навигация:

<router-link :to="{ name: 'routeName' }" target="_blank">
  Открыть в новой вкладке
</router-link>

Такой подход соответствует стандартам Vue и HTML и минимизирует использование JavaScript.

Ограничения и рекомендации

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

Полезные материалы

1. Programmatic Navigation | Vue Router — официальное руководство по навигации.
2. Window: open() method – Web APIs | MDN — подробное руководство по использованию window.open().
3. vuejs/core · Discussions · GitHub — обсуждения разработчиков Vue.
4. Browser environment, specs — информация о браузерной среде.
5. Components Basics — Vue.js — основы работы с компонентами Vue.
6. Understanding Vue.js Lifecycle Hooks | DigitalOcean — обзор жизненного цикла компонентов Vue.
7. <a>: The Anchor element – HTML: HyperText Markup Language | MDN — информация об элементе-якоре в HTML.