Как открыть ссылку в новой вкладке в Vue

Чтобы открыть ссылку в новой вкладке в Vue, создайте элемент привязки (<a>) и установите для его атрибута target значение _blank, например, значение <a href="https://codingbeautydev.com" target="_blank"></a>. The _blank указывает, что ссылка должна быть открыта в новой вкладке.

App.vue

<template>
  <div id="app">
    <a
      href="https://codingbeautydev.com"
      target="_blank"
      rel="noopener noreferrer"
    >
      Coding Beauty
    </a>
    <br /><br />
    <a
      href="https://codingbeautydev.com/blog"
      target="_blank"
    >
      Coding Beauty Blog
    </a>
  </div>
</template>

Свойство target элемента привязки указывает, где открыть связанный документ. По умолчанию target имеет значение _self, что делает связанную страницу открытой в том же фрейме или вкладке, где она была нажата. Чтобы страница открывалась в новой вкладке, мы устанавливаем target на _blank.

Мы также установили свойство rel на noreferrer в целях безопасности. Это предотвращает получение открытой страницей какой-либо информации о странице, с которой она была открыта.

Открывать ссылку в новой вкладке по нажатию кнопки

Иногда мы предпочитаем кнопку вместо ссылки, чтобы открывать новую вкладку при нажатии.

Чтобы открыть ссылку в новой вкладке при нажатии кнопки, создайте элемент button и установите прослушиватель событий click, который вызывает метод window.open().

App.vue

<template>
  <div id="app">
    <p>
      Click this button to visit Coding Beauty in a new tab
    </p>
    <button
      role="link"
      @click="openInNewTab('https://codingbeautydev.com')"
    >
      Click
    </button>
  </div>
</template>
<script>
export default {
  methods: {
    openInNewTab(url) {
      window.open(url, '_blank', 'noreferrer');
    },
  },
};
</script>

Мы используем метод open() объекта window, чтобы программно открыть ссылку в новой вкладке. Этот метод имеет три необязательных параметра:

1. url: URL страницы для открытия в новой вкладке.
2. target: как и атрибут target элемента <a>, значение этого параметра указывает, где открыть связанный документ, т. е. контекст просмотра. Он принимает все значения, которые принимает атрибут target элемента <a>.
3. windowFeatures: Список параметров окна, разделенных запятыми. noreferrer — один из таких вариантов.

Передача _blank в параметр target приводит к открытию ссылки в новой вкладке.

При нажатии на кнопку вызывается прослушиватель событий, который в свою очередь вызывает window.open(), который открывает указанную ссылку в новой вкладке.

Первоначально опубликовано на codingbeautydev.com

Все сумасшедшие вещи, которые делает JavaScript

Увлекательное руководство по тонким предостережениям и менее известным частям JavaScript.

Зарегистрируйтесь и немедленно получите бесплатную копию.