Reindirizzamento Vue.js a un'altra pagina


133

Vorrei fare un reindirizzamento in modo Vue.jssimile al javascript alla vaniglia

window.location.href = 'some_url'

Come ho potuto raggiungere questo obiettivo in Vue.js?


Intendi un reindirizzamento a una route definita in vue router '/ my / vuerouter / url'? O fai un reindirizzamento del browser su some-url.com ?
Hitautodestruct

Risposte:


187

Se si sta utilizzando vue-router, è necessario utilizzare router.go(path)per navigare verso un determinato percorso. È possibile accedere al router dall'interno di un componente utilizzando this.$router.

Altrimenti, window.location.href = 'some url';funziona bene per le app non a pagina singola.

EDIT : router.go()modificato in VueJS 2.0. Puoi usare router.push({ name: "yourroutename"})o proprio router.push("yourroutename")ora per reindirizzare.

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


2
Nel mio caso l'uso è di indirizzare a un'altra pagina non singola
Jimmy Obonyo Abor,

8
Stavo ottenendo: Uncaught ReferenceError: router is not definederrore, come iniettare il router nel componente?
Saurabh,

@felipekm cosa? Non è la stessa cosa?
Barry D.18

3
router.push ("yourroutename") NON è lo stesso di router.push ({name: "yourroutename"). Il primo definisce il percorso direttamente. Il secondo prende il percorso con il nome specificato.
Pinki,

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

84

Secondo i documenti, router.push sembra il metodo preferito:

Per passare a un URL diverso, utilizzare router.push. Questo metodo inserisce una nuova voce nello stack della cronologia, quindi quando l'utente fa clic sul pulsante Indietro del browser verrà portato all'URL precedente.

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

Cordiali saluti: Webpack e configurazione dei componenti, app a pagina singola (dove si importa il router tramite Main.js), ho dovuto chiamare le funzioni del router dicendo:

this.$router

Esempio: se si desidera reindirizzare a una route denominata "Home" dopo aver soddisfatto una condizione:

this.$router.push('Home') 

1
Questa domanda non ha nulla a che fare con la compilazione (webpack).
Jimmy Obonyo Abor,

12
Grazie per il downvote, anche se la maggior parte delle persone si svilupperà con Vue Cli, Webpack, router e store / Vuex e probabilmente incontrerà il problema di non poter chiamare il router.
Dave Sottimano,

1
@JimmyObonyoAbor hiyo comment na downvote utasema unamlipa haha
Cholowao

@Cholowao lui lui lui, sawa tushasikia! ho un kazi reattivo, chiamami se hai abilità ...
Jimmy Obonyo Abor

1
@JimmyObonyoAbor
Cholowao

41

basta usare:

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

Non utilizzare vue-router, altrimenti verrai reindirizzato a " http://yoursite.com/#!/http://siwei.me "

il mio ambiente: nodo 6.2.1, vue 1.0.21, Ubuntu.


1
Non vedo alcun motivo, perché questo dovrebbe essere tra virgolette doppie ..?
Moritz,

1
In realtà standardjs dice "Usa virgolette singole per le stringhe tranne che per evitare l'escape".
Moritz,

questo è stato qualche tempo fa, ma in realtà l'ho risolto utilizzando virgolette singole, ma immagino che anche le doppie virgolette dovrebbero funzionare e potrebbero essere utili in collegamenti complessi.
Jimmy Obonyo Abor,

controlla prima la versione vue. nella prima versione, forse a Vue non importa la convenzione del codice. Tuttavia, nel mio ambiente, la convenzione del codice causerà un errore di compilazione (da es6 compilato a vanilla js). Se non hai utilizzato il modulo nodo 'ES6', forse andrà bene.
Siwei Shen 申思维

cosa succede se si desidera aprirlo in una nuova scheda?
Fthi.a Abadi,

29

Quando sei all'interno di un tag di script componente puoi usare il router e fare qualcosa del genere

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

Grazie amico, semplice e diretto.
Soluzione Spirito



6

se vuoi indirizzare verso un'altra pagina this.$router.push({path: '/pagename'})

se vuoi instradare con i parametri this.$router.push({path: '/pagename', param: {param1: 'value1', param2: value2})


5
window.location = url;

"url" è l'URL Web che desideri reindirizzare.


3

Puoi anche utilizzare il v-bind direttamente sul modello come ...

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

il :è l'abbreviazione di v-bind.


È inoltre possibile utilizzare la sintassi ES6:: href = " `/path-to-route/${IdVariable}`" O il percorso indicato come indicato qui ( router.vuejs.org/guide/essentials/named-routes.html ): :href="{ name: 'NamedRouteDeclaredAtRouter' , params: { id: idValue } }"
mEnE

1

Se qualcuno desidera il reindirizzamento permanente da una pagina /aa un'altra pagina/b


Possiamo usare l' redirect:opzione aggiunta in router.js. Ad esempio, se vogliamo reindirizzare gli utenti sempre a una pagina separata quando digita l'URL di root o di 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

Quindi, quello che stavo cercando era solo dove mettere window.location.hrefe la conclusione a cui sono arrivato è che il modo migliore e più veloce per reindirizzare è nei percorsi (in questo modo, non aspettiamo che venga caricato nulla prima di reindirizzare).

Come questo:

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

Forse aiuterà qualcuno ..


0

Per rimanere in linea con la tua richiesta originale:

window.location.href = 'some_url'

Puoi fare qualcosa del genere:

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

Si noti che ciò non sfrutta l'utilizzo del router di Vue, ma se si desidera "effettuare un reindirizzamento in Vue.js simile al javascript vanilla", funzionerebbe.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.