Redirection Vue.js vers une autre page


133

Je voudrais faire une redirection Vue.jssimilaire au javascript vanille

window.location.href = 'some_url'

Comment pourrais-je y parvenir dans Vue.js?


Voulez-vous dire une redirection vers une route définie dans vue router '/ my / vuerouter / url'? Ou est-ce qu'un navigateur redirige vers some-url.com ?
hitautodestruct

Réponses:


187

Si vous utilisez vue-router, vous devez utiliser router.go(path)pour naviguer vers un itinéraire particulier. Le routeur est accessible depuis un composant en utilisant this.$router.

Sinon, window.location.href = 'some url';fonctionne très bien pour les applications non monopages.

EDIT : router.go()changé dans VueJS 2.0. Vous pouvez utiliser router.push({ name: "yourroutename"})ou tout simplement router.push("yourroutename")pour rediriger.

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


2
Dans mon cas, l'utilisation est de diriger vers une autre page non unique
Jimmy Obonyo Abor

8
J'obtenais: Uncaught ReferenceError: router is not definederreur, comment injecter le routeur dans le composant?
Saurabh

@felipekm quoi? N'est-ce pas la même chose?
Barry D.

3
router.push ("yourroutename") n'est PAS le même que router.push ({name: "yourroutename"). Le premier définit directement l'itinéraire. Le second prend la route avec le nom spécifié.
pinki

8
this.$router.push('routename)
ka_lin

84

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

Pour accéder à une URL différente, utilisez router.push. Cette méthode pousse une nouvelle entrée dans la pile d'historique, de sorte que lorsque l'utilisateur clique sur le bouton Précédent du navigateur, il sera redirigé vers l'URL précédente.

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

FYI: Configuration du Webpack et des composants, application d'une seule page (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 "Home" après qu'une condition soit remplie:

this.$router.push('Home') 

1
Cette question n'a rien à voir avec la compilation (webpack).
Jimmy Obonyo Abor

12
Merci pour le vote négatif, même si la plupart des gens développeront avec vue cli, webpack, router et store / vuex et se heurteront probablement au problème de ne pas pouvoir appeler le routeur.
Dave Sottimano

1
@JimmyObonyoAbor hiyo commentez avec downvote utasema unamlipa haha
Cholowao

@Cholowao he he he, sawa tushasikia! J'ai une réaction kazi, envoyez-moi un ping si vous avez des compétences ...
Jimmy Obonyo Abor

1
@JimmyObonyoAbor
Cholowao

41

utilisez simplement:

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

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

mon environnement: node 6.2.1, vue 1.0.21, Ubuntu.


1
Je ne vois aucune raison, pourquoi cela devrait être entre guillemets ..?
Moritz le

1
En fait, standardjs dit "Utilisez des guillemets simples pour les chaînes, sauf pour éviter les échappements."
Moritz

c'était il y a quelque temps, mais j'ai en fait résolu ce problème en utilisant des guillemets simples, mais je suppose que les guillemets doubles devraient également fonctionner et pourraient être utiles dans les liens complexes.
Jimmy Obonyo Abor

vérifiez d'abord la version de vue. dans la première version, peut-être que vue ne se soucie pas de la convention de code. Cependant, dans mon environnement, la convention de code provoquera une erreur de compilation (de es6 compilé à vanilla js). Si vous n'avez pas utilisé le module de nœud 'ES6', peut-être que ça ira.
Siwei Shen 申思维

et si vous souhaitez l'ouvrir dans un nouvel onglet?
Fthi.a.Abadi

29

À l'intérieur d'une balise de script de composant, vous pouvez utiliser le routeur et faire quelque chose comme ça

this.$router.push('/url-path')

Merci mec, simple et direct.
Solution Spirit



6

si vous souhaitez vous diriger vers une autre page this.$router.push({path: '/pagename'})

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


5
window.location = url;

«url» est l'URL Web que vous souhaitez rediriger.


3

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

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

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


Vous pouvez également utiliser la syntaxe ES6:: href = " `/path-to-route/${IdVariable}`" Ou la route nommée comme ici référencée ( router.vuejs.org/guide/essentials/named-routes.html ): :href="{ name: 'NamedRouteDeclaredAtRouter' , params: { id: idValue } }"
mEnE

1

Si quelqu'un souhaite une redirection permanente d'une page /avers une autre page/b


Nous pouvons utiliser l' redirect:option 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
<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

Donc, ce que je cherchais était seulement mettre le window.location.hrefet la conclusion à laquelle je suis arrivé était que le moyen le meilleur et le plus rapide de rediriger est dans les routes (de cette façon, nous n'attendons rien pour charger avant de rediriger).

Comme ça:

routes: [
    {
        path: "/",
        name: "ExampleRoot",
        component: exampleComponent,
        meta: {
            title: "_exampleTitle"
        },
        beforeEnter: () => {
            window.location.href = 'https://www.myurl.io';
        }
    }]

Peut-être que cela aidera quelqu'un.


0

Pour rester en phase avec votre demande initiale:

window.location.href = 'some_url'

Vous pouvez faire quelque chose comme ceci:

<div @click="this.window.location='some_url'">
</div>

Notez que cela ne profite pas de l'utilisation du routeur de Vue, mais si vous voulez "faire une redirection dans Vue.js similaire au javascript vanilla", cela fonctionnerait.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.