it-swarm.com.de

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

Ich habe eine Übersichtsseite und eine Detailunterseite. Alle Routen werden mit vue-router (v 0.7.x) mithilfe einer programmatischen Navigation wie folgt implementiert:

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

Wenn ich jedoch von der Zusammenfassungsseite auf die Unterseite leite, muss ich die Unterseite in einem neuen Tab öffnen, genauso wie ich _target="blank" zu einem <a>-Tag hinzufügen würde. 

Gibt es eine Möglichkeit, dies zu tun?

25
Tang Jiong

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 für mich funktioniert. danke.

Es scheint, als sei dies jetzt in neueren Versionen möglich (Vue Router 3.0.1):

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

Für diejenigen, die sich fragen, lautet die Antwort nein . Siehe verwandte issue auf github.

F: Kann vue-router in einem neuen Tab-Programm einen Link öffnen

A: Nein. Verwenden Sie einen normalen Link.

18
wanyama_man

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:

6
Yuci

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>
4
Alice Chan

Ich denke, der beste Weg ist einfach zu benutzen:

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

????* fliegt weg *

1

Schreiben Sie einfach diesen Code in Ihre Routing-Datei:

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