Kann vue-router einen Link in einem neuen Tab öffnen?

93

Ich habe eine Übersichtsseite und eine detaillierte Unterseite. Alle Routen werden mit vue-router(v 0.7.x) unter Verwendung der folgenden programmatischen Navigation implementiert :

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

Wenn ich jedoch von der Zusammenfassungsseite zur Unterseite weitergehe, muss ich die Unterseite in einer neuen Registerkarte öffnen, genau wie durch Hinzufügen _target="blank"zu einem <a>Tag.

Gibt es eine Möglichkeit, dies zu tun?

Tang Jiong
quelle
2
Ich glaube nicht, dass dies mit dem Vue-Router möglich ist. Sie können Ihre URL extrahieren und erstellen und dann window.open (URL, '_blank') verwenden
Deepak,
1
Ja, sie sagen offiziell, dass es unmöglich ist. Danke dir.
Tang Jiong
Es gibt unten eine Antwort, die funktioniert. Sie sollten dies als Antwort auf Ihre Frage akzeptieren, finden Sie nicht?
Andres Felipe

Antworten:

148

Ich denke, dass Sie so etwas tun können:

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

es hat bei mir funktioniert. Vielen Dank.

Rafael Andrs Cspedes Basterio
quelle
4
Dies scheint mir der beste Weg zu sein. Sie verwenden immer noch $ router, um die URL zu erstellen, ohne eine hackige Zeichenfolge zusammenfügen zu müssen. Verwenden Sie dann das Fenster, um die neue Registerkarte zu öffnen. +1
John Smith
2
Dies ist die vollständigste Lösung, wenn sich die URL der Route, auf die Sie zugreifen möchten, auf diese Weise ändert. nett!
Nitzankin
2
Leider wird diese Methode von einem Standard-Browser-Popup-Blocker blockiert
Photonic
Dies ist die beste Antwort IMO
Kaleazy
1
@Rafel, Darf ich Sie bitten, sich eine Vue.JS-Frage anzusehen, die sich auf den Quellcode in Github des Buches 'Full-Stack Vue.js 2 and Laravel 5' von Anthone Gore bezieht. Stackoverflow.com/questions/59245577 /… ? Schauen Sie sich besonders den Abschnitt EDIT: des OP an?
Istiaque Ahmed
117

In neueren Versionen (Vue Router 3.0.1) scheint dies jetzt möglich zu sein:

<router-link :to="{ name: 'fooRoute'}" target="_blank">
  Link Text
</router-link>
Andrew Mao
quelle
Scheint nicht, dass Sie Parameter übergeben können? Öffnen Sie einfach den Link selbst. Richtig?
Gotts
@Gotts Sie können auch Parameter und Queryparams übergeben. Der Code dafür ist unten angegeben <router-link: to = "{name: 'fooRoute', params: {param_var: 'id_parameter'}, query: {query_var: 'query_params'}}" target = "_ blank" > Text verknüpfen </ router-link>
Pushkar Shirodkar
Beachten Sie, dass dies für den <Router-Link> gilt und nicht programmgesteuert funktioniert this.$router.push().
Jplindstrom
22

Für diejenigen, die sich fragen, ist die Antwort nein. Siehe verwandte Ausgabe auf Github.

F: Kann der Vue-Router einen Link in einer neuen Registerkarte progammatisch öffnen?

A: Nein. Verwenden Sie einen normalen Link.

wanyama_man
quelle
11
Danke, eigentlich wird das Thema von mir eröffnet.
Tang Jiong
5
Jetzt möglich, target="_blank"zu einem <router-link>Tag in v3 stackoverflow.com/a/49654382/2678454 hinzuzufügen
danke
Fand dies sehr hilfreich, anstatt die vollständige URL zu erstellen und window.open
Sainath SR
13

Falls Sie Ihre Route wie in der Frage angegeben definieren (Pfad: '/ 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
    }
  ]
})

Sie können die URL in Ihrer Zusammenfassungsseite auflösen und Ihre Unterseite wie folgt öffnen:

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

Wenn Sie Ihrer Route einen Namen gegeben haben, können Sie die URL natürlich nach Namen auflösen:

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

...

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

Verweise:

Yuci
quelle
10

Irgendwo in Ihrem Projekt, normalerweise main.js oder router.js

import Router from 'vue-router'

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

In Ihrer Komponente:

<div @click="$router.open({name: 'User', params: {ID: 123}})">Open in new tab</div>
Alice Chan
quelle
Kein Down-Voting, aber vielleicht ist es schön für Vue3? Weil Konsole / Protokollierung dies. $ Router.open für mich undefiniert zurückgibt
Dexygen
Von diesem Ansatz wird abgeraten, da er den Prototyp mutiert. Sie können es nicht protokollieren, da es nicht Teil der Spezifikation ist.
adi518
5

Ich denke, der beste Weg ist, einfach zu verwenden:

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

🚀 * fliegt weg *

Nada Le Coupanec
quelle
2
Nicht weit genug entfernt
Dexygen
4

Schreiben Sie einfach diesen Code in Ihre Routing-Datei:

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

Das hat bei mir funktioniert-

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

Ich habe die Antwort von @Rafael_Andrs_Cspedes_Basterio geändert

Nasir Khan
quelle
2

Wenn Sie nur auf relative Pfade wie Interesse: /dashboard, /aboutetc, Andere Antworten.

Wenn Sie einen absoluten Pfad wie: https://www.google.comzu einer neuen Registerkarte öffnen möchten , müssen Sie wissen, dass Vue Router NICHT dazu gedacht ist, diese zu verarbeiten.

Sie scheinen dies jedoch als Feature-Anfrage zu betrachten. # 1280 . Aber bis sie das tun,



Hier ist ein kleiner Trick, mit dem Sie externe Links mit dem Vue-Router verarbeiten können.

  • Gehen Sie zur Routerkonfiguration (wahrscheinlich router.js) und fügen Sie diesen Code hinzu:
/* 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()
}

Wenn wir uns jetzt mit absoluten URLs beschäftigen, haben wir eine Lösung. Zum Beispiel, um Google auf einem neuen Tab zu öffnen

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

Denken Sie daran, dass wir jedes Mal, wenn wir eine andere Seite für eine neue Registerkarte öffnen, diese verwenden müssen noopener noreferrer.

Lesen Sie hier mehr

oder hier

roli roli
quelle
0

Das funktioniert bei mir:

In der HTML-Vorlage: <a target="_blank" :href="url" @click.stop>your_name</a>

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

miko866
quelle