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

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?

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.

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>

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.

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:

• vue-router router.resolve (Speicherort, aktuell?, anhängen?)
• vue-router router-link

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>

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

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

🚀 * fliegt weg *

Schreiben Sie einfach diesen Code in Ihre Routing-Datei:

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

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

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

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