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?


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.


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>

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.


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:


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>

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 *


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

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


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


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


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>
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.