Bisakah vue-router membuka link di tab baru?

97

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?

Tang Jiong
sumber
3
Saya tidak berpikir itu mungkin dengan vue router, Anda dapat mengekstrak dan membangun url Anda dan kemudian menggunakan window.open (url, '_blank')
Deepak
1
Ya, mereka secara resmi mengatakan itu tidak mungkin. Terima kasih.
Tang Jiong
ada jawaban di bawah ini yang berhasil, Anda harus menerimanya sebagai jawaban atas pertanyaan Anda, bukan?
Andres Felipe

Jawaban:

170

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.

Rafael Andrs Cspedes Basterio
sumber
4
Ini sepertinya cara terbaik bagi saya. Anda masih menggunakan $ router untuk membangun url tanpa harus menggabungkan beberapa string hacky, lalu gunakan window untuk membuka tab baru. +1
John Smith
2
Ini adalah solusi paling lengkap, jika url dari rute yang Anda coba akses berubah dengan cara ini membuat Anda tetap terkendali. bagus!
Nitzankin
3
Sayangnya metode ini diblokir oleh beberapa pemblokir popup browser default
Photonic
Ini adalah jawaban terbaik IMO
kaleazy
1
@Rafel, Bolehkah saya meminta Anda untuk melihat pertanyaan Vue.JS terkait dengan kode sumber di github dari buku 'Full-Stack Vue.js 2 dan Laravel 5' oleh Anthone Gore di sini stackoverflow.com/questions/59245577 /… ? Khususnya lihat bagian EDIT: pada OP?
Istiaque Ahmed
124

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>
Andrew Mao
sumber
Bukankah sepertinya Anda bisa melewatkan parameter? buka saja tautannya. Benar?
Gotts
@ Gotts Anda juga dapat melewati params dan queryparams. Kode untuk melakukan itu diberikan di bawah ini <router-link: to = "{name: 'fooRoute', params: {param_var: 'id_parameter'}, query: {query_var: 'query_params'}}" target = "_ blank" > Teks Tautan </router-link>
Pushkar Shirodkar
Perhatikan bahwa ini untuk <router-link>, ini tidak bekerja secara terprogram this.$router.push().
jplindstrom
22

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.

wanyama_man
sumber
12
Terima kasih, sebenarnya masalah dibuka oleh saya.
Tang Jiong
5
Sekarang mungkin untuk menambahkan target="_blank"ke <router-link>tag di v3 stackoverflow.com/a/49654382/2678454
terima kasih
Menemukan ini sangat membantu daripada membangun URL lengkap dan menggunakan window.open
Sainath SR
14

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:

Yuci
sumber
11

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>
Alice Chan
sumber
Bukan down-voting, tapi mungkin bagus untuk Vue3? Karena konsol / logging ini. $ Router.open mengembalikan tidak ditentukan untuk saya
Dexygen
Pendekatan ini tidak dianjurkan karena prototipe bermutasi. Anda tidak dapat mencatatnya, karena ini bukan bagian dari spesifikasi.
adi518
4

Saya pikir cara terbaik adalah dengan menggunakan:

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

🚀 * terbang jauh *

Nada Le Coupanec
sumber
2
Tidak cukup jauh
Dexygen
4

Cukup tulis kode ini di file perutean Anda:

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

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

Nasir Khan
sumber
3

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

roli roli
sumber
bekerja dengan baik untuk saya di hampir semua perangkat kecuali ponsel, di mana jendela baru tidak terbuka!
javascript110899
0

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

miko866
sumber
0

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