J'ai une page de résumé et une sous-page de détails. Toutes les routes sont implémentées avec vue-router(v 0.7.x) en utilisant la navigation programmatique comme ceci:
this.$router.go({ path: "/link/to/page" })
Cependant, lorsque je passe de la page de résumé à la sous-page, je dois ouvrir la sous-page dans un nouvel onglet comme on le ferait en l'ajoutant _target="blank"à une <a>balise.
Y a-t-il un moyen de faire cela?
Réponses:
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.
Il semble que cela soit désormais possible dans les versions plus récentes (Vue Router 3.0.1):
<router-link :to="{ name: 'fooRoute'}" target="_blank">
Link Text
</router-link>
this.$router.push().
Pour ceux qui se demandent, la réponse est non. Voir le problème associé sur github.
Q: Peut vue-router ouvrir le lien dans un nouvel onglet de programmation
R: Non, utilisez un lien normal.
target="_blank"à une <router-link>balise dans la v3 stackoverflow.com/a/49654382/2678454
Dans le cas où vous définissez votre itinéraire comme celui posé dans la question (chemin: '/ lien / vers / 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 itinéraire, 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:
Quelque part dans votre projet, généralement main.js ou router.js
import Router from 'vue-router'
Router.prototype.open = function (routeObject) {
const {href} = this.resolve(routeObject)
window.open(href, '_blank')
}
Dans votre composant:
<div @click="$router.open({name: 'User', params: {ID: 123}})">Open in new tab</div>
Je pense que le meilleur moyen est simplement d'utiliser:
window.open("yourURL", '_blank');
🚀 * s'envole *
Écrivez simplement ce code dans votre fichier de routage:
{
name: 'Google',
path: '/google',
beforeEnter() {
window.open("http://www.google.com",
'_blank');
}
}
Cela a fonctionné pour moi-
let routeData = this.$router.resolve(
{
path: '/resources/c-m-communities',
query: {'dataParameter': 'parameterValue'}
});
window.open(routeData.href, '_blank');
J'ai modifié la réponse @Rafael_Andrs_Cspedes_Basterio
Si vous êtes intéressé uniquement sur des chemins relatifs comme: /dashboard, /aboutetc, Voir d' autres réponses.
Si vous voulez ouvrir un chemin absolu comme: https://www.google.comvers un nouvel onglet, vous devez savoir que Vue Router n'est PAS destiné à les gérer.
Cependant, ils semblent considérer cela comme une demande de fonctionnalité. # 1280 . Mais jusqu'à ce qu'ils fassent ça,
Voici une petite astuce que vous pouvez faire pour gérer les liens externes avec vue-router.
router.js) et ajoutez ce code:/* 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()
}
Désormais, chaque fois que nous traitons des URL absolues, nous avons une solution. Par exemple pour ouvrir google dans un nouvel onglet
this.$router.absUrl('https://www.google.com)
N'oubliez pas que chaque fois que nous ouvrons une autre page vers un nouvel onglet, nous DEVONS utiliser noopener noreferrer.