Vue.js Weiterleitung auf eine andere Seite

133

Ich möchte eine Umleitung Vue.jsähnlich dem Vanille-Javascript durchführen

window.location.href = 'some_url'

Wie könnte ich dies in Vue.js erreichen?

Jimmy Obonyo Abor
quelle
Meinen Sie eine Umleitung zu einer Route, die im vue-Router '/ my / vuerouter / url' definiert ist? Oder leiten Sie einen Browser zu some-url.com weiter ?
Hitautodestruct

Antworten:

187

Wenn Sie verwenden vue-router, sollten Sie verwenden router.go(path), um zu einer bestimmten Route zu navigieren. Auf den Router kann von innerhalb einer Komponente mit zugegriffen werden this.$router.

Andernfalls, window.location.href = 'some url'; funktioniert es gut für nicht einseitige Apps.

EDIT : router.go()geändert in VueJS 2.0. Sie können router.push({ name: "yourroutename"})oder nur verwendenrouter.push("yourroutename") jetzt umleiten.

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

Jeff
quelle
2
In meinem Fall wird verwendet, um auf eine andere nicht einzelne Seite zu
verweisen
8
Ich habe Folgendes erhalten: Uncaught ReferenceError: router is not definedFehler: Wie wird der Router in die Komponente eingefügt?
Saurabh
@felipekm was? Ist das nicht dasselbe?
Barry D.
3
router.push ("yourroutename") ist NICHT dasselbe wie router.push ({name: "yourroutename"). Zuerst definiert man die Route direkt. Der zweite nimmt die Route mit dem angegebenen Namen.
Pinki
8
this.$router.push('routename)
ka_lin
84

Laut den Dokumenten scheint router.push die bevorzugte Methode zu sein:

Verwenden Sie router.push, um zu einer anderen URL zu navigieren. Diese Methode verschiebt einen neuen Eintrag in den Verlaufsstapel. Wenn der Benutzer auf die Schaltfläche "Zurück" des Browsers klickt, wird er zur vorherigen URL weitergeleitet.

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

Zu Ihrer Information: Webpack & Komponenten-Setup, Single-Page-App (wo Sie den Router über Main.js importieren), ich musste die Router-Funktionen aufrufen, indem ich sagte:

this.$router

Beispiel: Wenn Sie zu einer Route namens "Home" umleiten möchten, nachdem eine Bedingung erfüllt ist:

this.$router.push('Home') 
Dave Sottimano
quelle
1
Diese Frage hat nichts mit Kompilierung (Webpack) zu tun.
Jimmy Obonyo Abor
12
Vielen Dank für die Ablehnung, obwohl sich die meisten Leute mit vue cli, webpack, router und store / vuex entwickeln werden und wahrscheinlich auf das Problem stoßen werden, den Router nicht anrufen zu können.
Dave Sottimano
1
@ JimmyObonyoAbor hiyo Kommentar na downvote utasema unamlipa haha
Cholowao
@Cholowao er er er, sawa tushasikia! Ich habe eine Reaktion Kazi, ping mich, wenn Sie Fähigkeiten haben ...
Jimmy Obonyo Abor
1
@ JimmyObonyoAbor
Cholowao
41

benutz einfach:

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

Verwenden Sie keinen Vue-Router, da Sie sonst zu " http://yoursite.com/#!/http://siwei.me " weitergeleitet werden.

Meine Umgebung: Knoten 6.2.1, Vue 1.0.21, Ubuntu.

Siwei Shen 申思维
quelle
1
Ich sehe keinen Grund, warum dies in doppelten Anführungszeichen stehen sollte ..?
Moritz
1
Tatsächlich sagt standardjs "Verwenden Sie einfache Anführungszeichen für Zeichenfolgen, außer um ein Entkommen zu vermeiden."
Moritz
Dies war vor einiger Zeit, aber ich habe dies tatsächlich durch einfache Anführungszeichen gelöst, aber ich denke, doppelte Anführungszeichen sollten auch funktionieren und könnten in komplexen Links nützlich sein.
Jimmy Obonyo Abor
Überprüfen Sie zuerst die Vue-Version. In der frühen Version kümmert sich Vue vielleicht nicht um die Code-Konvention. In meiner Umgebung führt die Codekonvention jedoch zu Kompilierungsfehlern (von es6 kompiliert zu vanilla js). Wenn Sie das Knotenmodul 'ES6' nicht verwendet haben, ist es möglicherweise in Ordnung.
Siwei Shen 申思维
Was ist, wenn Sie es auf einer neuen Registerkarte öffnen möchten?
Fthi.a.Abadi
29

In einem Komponentenskript-Tag können Sie den Router verwenden und so etwas tun

this.$router.push('/url-path')
Njeru Cyrus
quelle
Danke Mann, einfach und unkompliziert.
Lösung Geist
8

Nur ein kinderleichtes Routing:

this.$router.push('Home');
Mohammad Mahdi KouchakYazdi
quelle
7

kann das auch versuchen ...

router.push({ name: 'myRoute' })
Davod Aslanifakor
quelle
6

Wenn Sie zu einer anderen Seite weiterleiten möchten this.$router.push({path: '/pagename'})

Wenn Sie mit Params routen möchten this.$router.push({path: '/pagename', param: {param1: 'value1', param2: value2})

Bagzie
quelle
5
window.location = url;

'url' ist die Web-URL, die Sie umleiten möchten.

Rayees Pk
quelle
3

Sie können die V-Bindung auch direkt an die Vorlage verwenden, z.

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

das :ist die Abkürzung von v-bind.

MEIN
quelle
Sie können auch die ES6-Syntax verwenden :: href = " `/path-to-route/${IdVariable}`" Oder die hier genannte benannte Route ( router.vuejs.org/guide/essentials/named-routes.html ): :href="{ name: 'NamedRouteDeclaredAtRouter' , params: { id: idValue } }"
mEnE
1

Wenn jemand eine permanente Umleitung von einer Seite /aauf eine andere Seite wünscht/b


Wir können die redirect:in der Option hinzugefügte Option verwenden router.js. Zum Beispiel, wenn wir die Benutzer immer auf eine separate Seite umleiten möchten, wenn er die Stamm- oder Basis-URL eingibt /:

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"),

    },
   ]
Rakibul Haq
quelle
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
Yash
quelle
0

Also, was ich suchte, war nur, wo ich das platzieren solltewindow.location.href und die Schlussfolgerung, zu der ich kam, war, dass der beste und schnellste Weg zum Umleiten in Routen besteht (auf diese Weise warten wir nicht auf das Laden von etwas, bevor wir umleiten).

So was:

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

Vielleicht hilft es jemandem ..

Marcus
quelle
0

Um mit Ihrer ursprünglichen Anfrage in Einklang zu bleiben:

window.location.href = 'some_url'

Sie können so etwas tun:

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

Beachten Sie, dass dies die Verwendung des Routers von Vue nicht nutzt. Wenn Sie jedoch "eine Umleitung in Vue.js ähnlich dem Vanille-Javascript vornehmen" möchten, funktioniert dies.

Fast Pitt
quelle