Может ли vue-router открыть ссылку в новой вкладке?


97

У меня есть сводная страница и дополнительная страница с подробностями. Все маршруты реализованы в vue-router(v 0.7.x) с использованием такой программной навигации:

this.$router.go({ path: "/link/to/page" })

Однако, когда я перехожу со страницы сводки к подстранице, мне нужно открыть подстраницу на новой вкладке так же, как если бы я добавлял _target="blank"ее в <a>тег.

Есть ли способ сделать это?


3
Я не думаю, что это возможно с vue router, вы можете извлечь и создать свой URL-адрес, а затем использовать window.open (url, '_blank')
Дипак,

1
Да, официально говорят, что это невозможно. Спасибо.
Тан Цзюн

ниже есть ответ, который работает, вы должны принять это как ответ на свой вопрос, не так ли?
Андрес Фелипе

Ответы:


170

Я думаю, что можно сделать что-то вроде этого:

let routeData = this.$router.resolve({name: 'routeName', query: {data: "someData"}});
window.open(routeData.href, '_blank');

у меня это сработало. Спасибо.


4
Мне это кажется лучшим способом. Вы по-прежнему используете $ router для создания URL-адреса без необходимости смешивать какую-то хакерскую строку, а затем использовать окно, чтобы открыть новую вкладку. +1
Джон Смит

2
Это наиболее полное решение, если URL-адрес маршрута, к которому вы пытаетесь получить доступ, изменяется таким образом, чтобы держать вас под контролем. отлично!
Nitzankin 02

3
К сожалению, этот метод блокируется некоторым блокировщиком всплывающих окон браузера по умолчанию
Photonic

Это лучший ответ IMO
kaleazy

1
@Rafel, могу ли я попросить вас взглянуть на вопрос Vue.JS, связанный с исходным кодом в github книги Anthone Gore «Full-Stack Vue.js 2 и Laravel 5» здесь stackoverflow.com/questions/59245577 /… ? В частности, обратите внимание на раздел EDIT: OP?
Istiaque Ahmed

124

Похоже, что теперь это возможно в более новых версиях (Vue Router 3.0.1):

<router-link :to="{ name: 'fooRoute'}" target="_blank">
  Link Text
</router-link>

Разве вы не можете передавать параметры? просто откройте саму ссылку. Верный?
Получил

@Gotts, вы также можете передавать параметры и параметры запроса. Код для этого должен быть приведен ниже <router-link: to = "{name: 'fooRoute', params: {param_var: 'id_parameter'}, query: {query_var: 'query_params'}}" target = "_ blank" > Текст ссылки </router-link>
Пушкарь Широдкар

Обратите внимание, что это для <router-link>, он не работает программно this.$router.push().
jplindstrom

22

Для тех, кому интересно, ответ отрицательный. См. Соответствующую проблему на github.

Вопрос: Может ли vue-router открыть ссылку в новой вкладке программно

A: Нет. Используйте обычную ссылку.


12
Спасибо, собственно вопрос открыт мной.
Тан Цзюн

5
Теперь можно добавить target="_blank"к <router-link>тегу в v3 stackoverflow.com/a/49654382/2678454
спасибо

Нашел это очень полезным вместо создания полного URL-адреса и использования window.open
Sainath SR

14

В случае, если вы определяете свой маршрут, как тот, который задан в вопросе (путь: '/ link / to / page'):

import Vue from 'vue'
import Router from 'vue-router'
import MyComponent from '@/components/MyComponent.vue';

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/link/to/page',
      component: MyComponent
    }
  ]
})

Вы можете разрешить URL-адрес на странице сводки и открыть дополнительную страницу, как показано ниже:

<script>
export default {
  methods: {
    popup() {
      let route = this.$router.resolve({path: '/link/to/page'});
      // let route = this.$router.resolve('/link/to/page'); // This also works.
      window.open(route.href, '_blank');
    }
  }
};
</script>

Конечно, если вы дали своему маршруту имя, вы можете разрешить URL-адрес по имени:

routes: [
  {
    path: '/link/to/page',
    component: MyComponent,
    name: 'subPage'
  }
]

...

let route = this.$router.resolve({name: 'subPage'});

Ссылки:


11

Где-то в вашем проекте, обычно main.js или router.js

import Router from 'vue-router'

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

В вашем компоненте:

<div @click="$router.open({name: 'User', params: {ID: 123}})">Open in new tab</div>

Не отрицательное голосование, но, может быть, это хорошо для Vue3? Поскольку console / logging this. $ Router.open возвращает undefined для меня
Dexygen

Этот подход не рекомендуется, поскольку он изменяет прототип. Вы не можете зарегистрировать это, потому что это не часть спецификации.
adi518


4

Просто напишите этот код в свой файл маршрутизации:

{
  name: 'Google',
  path: '/google',
  beforeEnter() {                    
                window.open("http://www.google.com", 
                '_blank');
            }
}

4

Это сработало для меня-

let routeData = this.$router.resolve(
{
  path: '/resources/c-m-communities', 
  query: {'dataParameter': 'parameterValue'}
});
window.open(routeData.href, '_blank');

Я изменил ответ @Rafael_Andrs_Cspedes_Basterio


3

Если вас интересуют ТОЛЬКО относительные пути, такие как: /dashboardи /aboutт. Д., См. Другие ответы.

Если вы хотите открыть абсолютный путь, например: https://www.google.comк новой вкладке, вы должны знать, что Vue Router НЕ предназначен для их обработки.

Однако, похоже, они рассматривают это как просьбу о функции. # 1280 . Но пока они этого не сделают,



Вот небольшой трюк, который вы можете сделать для обработки внешних ссылок с помощью vue-router.

  • Зайдите в конфигурацию роутера (возможно router.js) и добавьте этот код:
/* Vue Router is not meant to handle absolute urls. */
/* So whenever we want to deal with those, we can use this.$router.absUrl(url) */
Router.prototype.absUrl = function(url, newTab = true) {
  const link = document.createElement('a')
  link.href = url
  link.target = newTab ? '_blank' : ''
  if (newTab) link.rel = 'noopener noreferrer' // IMPORTANT to add this
  link.click()
}

Теперь, когда мы имеем дело с абсолютными URL-адресами, у нас есть решение. Например, чтобы открыть Google на новой вкладке

this.$router.absUrl('https://www.google.com)

Помните, что всякий раз, когда мы открываем другую страницу на новой вкладке, мы ДОЛЖНЫ использовать noopener noreferrer.

Подробнее здесь

или здесь


у меня хорошо работает практически на всех устройствах, кроме мобильных телефонов, где не открывается новое окно!
javascript110899

0

Это работает для меня:

В шаблоне HTML: <a target="_blank" :href="url" @click.stop>your_name</a>

В смонтированном (): this.url = `${window.location.origin}/your_page_name`;


0

Самый простой способ сделать это с помощью якорного тега:

<a :href="$router.resolve({name: 'posts.show', params: {post: post.id}}).href" target="_blank">
    Open Post in new tab
</a>
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.