Чи може vue-router відкрити посилання в новій вкладці?

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

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

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

Чи є спосіб зробити це?

Я думаю, що ви можете зробити щось подібне:

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

це спрацювало для мене. Дякую.

Здається, це тепер можливо в новіших версіях (Vue Router 3.0.1):

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

Для тих, хто цікавиться, відповідь - ні. Дивіться відповідну проблему на github.

Питання: Чи може vue-маршрутизатор відкрити посилання в новій вкладці попрограмматично

В: Ні. Використовуйте звичайне посилання.

У випадку, якщо ви визначаєте свій маршрут, як той, що заданий у питанні (шлях: '/ посилання / на / сторінку'):

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'});

Список літератури:

• vue-router router.resolve (розташування, поточний ?, додати?)
• vue-router router-link

Десь у вашому проекті, як правило, 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>

Я думаю, найкращий спосіб - це просто використовувати:

window.open("yourURL", '_blank');

🚀 * відлітає *

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

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

Це спрацювало для мене-

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

Я змінив відповідь @Rafael_Andrs_Cspedes_Basterio

Якщо ви зацікавлені тільки на відносні шляхи , як: /dashboard, і /aboutт.д., інші відповіді.

Якщо ви хочете відкрити абсолютний шлях, наприклад: https://www.google.comдо нової вкладки, ви повинні знати, що маршрутизатор Vue НЕ призначений для їх обробки.

Однак вони, схоже, розглядають це як запит функції. # 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.

Детальніше читайте тут

або тут

Це працює для мене:

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

У змонтованому (): this.url = `${window.location.origin}/your_page_name`;

Найпростіший спосіб зробити це за допомогою прив'язки тегом буде такий:

<a :href="$router.resolve({name: 'posts.show', params: {post: post.id}}).href" target="_blank">
    Open Post in new tab
</a>