web-dev-qa-db-fra.com

Redirection Vue.js vers une autre page

J'aimerais faire une redirection en Vue.js similaire au javascript de Vanilla

window.location.href = 'some_url'

Comment pourrais-je réaliser cela dans Vue.js?

vue.jsurl-routingvuejs2vue-router
54
Jimmy Obonyo Abor

Si vous utilisez vue-router, vous devez utiliser router.go(path) pour naviguer vers un itinéraire particulier. Vous pouvez accéder au routeur depuis un composant à l'aide de this.$router.

Sinon, window.location.href = 'some url'; fonctionne correctement pour les applications ne comportant pas de page unique.

EDIT: router.go() modifié dans VueJS 2.0. Vous pouvez utiliser router.Push({ name: "yourroutename"}) ou juste router.Push("yourroutename") maintenant pour rediriger. 

https://router.vuejs.org/guide/essentials/named-routes.html

95
Jeff

Selon la documentation, router.Push semble être la méthode préférée: 

Pour naviguer vers une autre URL, utilisez router.Push. Cette méthode pousse un nouvelle entrée dans la pile d'historique, donc lorsque l'utilisateur clique sur le navigateur bouton de retour, ils seront pris à l'URL précédente.

source: https://router.vuejs.org/fr/essentials/navigation.html

Pour votre information: Webpack et configuration des composants, application page unique (où vous importez le routeur via Main.js), j'ai dû appeler les fonctions du routeur en disant:

this.$router

Exemple: si vous souhaitez rediriger vers une route appelée "Accueil" après qu'une condition soit remplie:

this.$router.Push('Home')
47
Dave Sottimano

juste utiliser: 

window.location.href = "http://siwei.me"

N'utilisez pas vue-router, sinon vous serez redirigé vers " http://votresite.com/#!/http://siwei.me "

mon environnement: noeud 6.2.1, vue 1.0.21, Ubuntu.

21
Siwei Shen 申思维

Lorsque vous vous trouvez dans une balise de script de composant, vous pouvez utiliser le routeur et procéder de la sorte

this.$router.Push('/url-path')
8
Njeru Cyrus
window.location = url;

"URL" est l'URL Web que vous souhaitez rediriger.

3
Rayees Pk

peut essayer cela aussi ... 

router.Push({ name: 'myRoute' })
2
Davod Aslanifakor

disons que nous mettons à jour le statut des commandes, que nous cliquons sur Modifier et que nous mettons à jour le statut, nous voulons maintenant revenir à la page précédente, d'où nous venons. 

this.$router.Push('../index')

ici, la partie ../index signifie que vous reviendrez deux fois de la route actuelle et que index sera le nom de la vue à laquelle vous voulez accéder.

en général sa this.$router.Push('your_path')

2
Hefaz

Juste un routage simple mort:  

this.$router.Push('Home');
2
KouchakYazdi

Vous pouvez également utiliser le v-bind directement sur le modèle comme ...

<a :href="'/path-to-route/' + IdVariable">

le : est l'abréviation de v-bind.

1
mEnE

Si quelqu'un veut une redirection permanente d'une page /a vers une autre page /b

Nous pouvons utiliser l’option redirect: ajoutée dans le router.js. Par exemple, si nous voulons toujours rediriger les utilisateurs vers une page distincte lorsqu'il tape l'URL racine ou de base /:

const router = new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    {
      path: "/",
      redirect: "/someOtherPage",
      name: "home",
      component: Home,
      // () =>
      // import(/* webpackChunkName: "home" */ "./views/pageView/home.vue"),

    },
   ]
0
Rakibul Haq
<div id="app">
   <a :href="path" />Link</a>
</div>

<script>
      new Vue({
        el: '#app',
        data: {
          path: 'https://www.google.com/'
        }
      });
</script> enter code here
0
Yash

si vous souhaitez accéder à une autre page this.$router.Push({path: '/pagename'})

si vous voulez router avec les paramètres this.$router.Push({path: '/pagename', param: {param1: 'value1', param2: value2})

0
Bagzie

Vous pouvez également travailler avec parent.location.href = 'url'

0
Wouter Schoofs

Naviguer entre les itinéraires Vue routes

La méthode préférée est router.Push(location, onComplete?, onAbort?)

Parce que:

Pour naviguer vers une autre URL, utilisez router.Push. Cette méthode pousse un nouvelle entrée dans la pile d'historique, donc lorsque l'utilisateur clique sur le navigateur bouton de retour, ils seront pris à l'URL précédente.

Lisez la documentation ICI .

Naviguer vers une URL externe

Vous n’utilisez pas le routeur Vue pour le routage externe, il ne gère que le routage au sein de votre application. Utilisez Vanilla js pour cela.

window.location = 'http://www.example.com';

ou

location.replace('http://example.com');

ou

window.open('http://example.com');
0
Maxim Shubin