Bisakah vue-router membuka link di tab baru?

Saya memiliki halaman ringkasan dan subhalaman detail. Semua rute diimplementasikan dengan vue-router(v 0.7.x) menggunakan navigasi terprogram seperti ini:

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

Namun, ketika saya merutekan dari halaman ringkasan ke subhalaman, saya perlu membuka subhalaman di tab baru seperti yang dilakukan orang dengan menambahkan _target="blank"ke <a>tag.

Apakah ada cara untuk melakukan ini?

Saya pikir Anda bisa melakukan sesuatu seperti ini:

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

itu berhasil untuk saya. Terima kasih.

Sepertinya ini sekarang dimungkinkan di versi yang lebih baru (Vue Router 3.0.1):

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

Bagi mereka yang bertanya-tanya, jawabannya tidak. Lihat masalah terkait di github.

T: Dapatkah vue-router membuka tautan di tab baru secara progamatis

J: Tidak, gunakan tautan biasa.

Jika Anda menentukan rute Anda seperti yang ditanyakan dalam pertanyaan (jalur: '/ link / ke / halaman'):

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
    }
  ]
})

Anda dapat menyelesaikan URL di halaman ringkasan Anda dan membuka sub halaman Anda seperti di bawah ini:

<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>

Tentu saja jika Anda telah memberi nama pada rute Anda, Anda dapat menentukan URL dengan nama:

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

...

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

Referensi:

• vue-router router.resolve (lokasi, saat ini ?, tambahkan?)
• vue-router router-link

Di suatu tempat di proyek Anda, biasanya main.js atau router.js

import Router from 'vue-router'

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

Di komponen Anda:

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

Saya pikir cara terbaik adalah dengan menggunakan:

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

🚀 * terbang jauh *

Cukup tulis kode ini di file perutean Anda:

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

Ini berhasil untukku-

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

Saya mengubah jawaban @Rafael_Andrs_Cspedes_Basterio

Jika Anda tertarik HANYA pada path relatif seperti: /dashboard, /aboutdll, Lihat jawaban lainnya.

Jika Anda ingin membuka jalur absolut seperti: https://www.google.comke tab baru, Anda harus tahu bahwa Vue Router TIDAK dimaksudkan untuk menanganinya.

Namun, mereka tampaknya menganggap itu sebagai permintaan fitur. # 1280 . Tapi sampai mereka melakukan itu,

Berikut ini sedikit trik yang dapat Anda lakukan untuk menangani tautan eksternal dengan vue-router.

• Buka konfigurasi router (mungkin router.js) dan tambahkan kode ini:

/* 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()
}

Sekarang, setiap kali kami berurusan dengan URL absolut, kami memiliki solusi. Misalnya membuka google ke tab baru

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

Ingatlah bahwa setiap kali kita membuka halaman lain ke tab baru yang HARUS kita gunakan noopener noreferrer.

Baca lebih lanjut di sini

atau Di Sini

Ini bekerja untuk saya:

Dalam template HTML: <a target="_blank" :href="url" @click.stop>your_name</a>

Di mount (): this.url = `${window.location.origin}/your_page_name`;

Cara termudah untuk melakukan ini menggunakan tag anchor adalah:

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