web-dev-qa-db-fra.com

Vue-router peut-il ouvrir un lien dans un nouvel onglet?

J'ai une page de résumé et une sous-page de détail. Tous les itinéraires sont implémentés avec vue-router (v 0.7.x) en utilisant la navigation par programme comme ceci:

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

Cependant, lorsque je route de la page de résumé à la sous-page, je dois ouvrir la sous-page dans un nouvel onglet, comme si on ajoutait _target="blank" à une balise <a>. 

Y a-t-il un moyen de faire cela?

javascriptvue.jsvue-router
25
Tang Jiong

Je pense que vous pouvez faire quelque chose comme ça: 

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

cela a fonctionné pour moi ... Merci.

41
Rafael Andrs Cspedes Basterio

Il semble que cela soit maintenant possible dans les nouvelles versions (Vue Router 3.0.1):

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

Pour ceux qui se demandent, la réponse est non ... Voir le sujet connexe issue sur github.

Q: Le lien vue-router peut-il être ouvert dans un nouvel onglet progammaticalement

A: Non, utilisez un lien normal.

18
wanyama_man

Si vous définissez votre itinéraire comme celui demandé dans la question (chemin: '/ 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
    }
  ]
})

Vous pouvez résoudre l'URL dans votre page de résumé et ouvrir votre sous-page comme ci-dessous:

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

Bien sûr, si vous avez donné un nom à votre route, vous pouvez résoudre l'URL par son nom:

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

...

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

Références:

6
Yuci

Je pense que le meilleur moyen est simplement d'utiliser:

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

???? * s'envole *

1
Nada Le Coupanec