Vorrei fare un reindirizzamento in modo Vue.js
simile al javascript alla vaniglia
window.location.href = 'some_url'
Come ho potuto raggiungere questo obiettivo in Vue.js?
Vorrei fare un reindirizzamento in modo Vue.js
simile al javascript alla vaniglia
window.location.href = 'some_url'
Come ho potuto raggiungere questo obiettivo in Vue.js?
Risposte:
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.
Uncaught ReferenceError: router is not defined
errore, come iniettare il router nel componente?
this.$router.push('routename)
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')
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.
Quando sei all'interno di un tag di script componente puoi usare il router e fare qualcosa del genere
this.$router.push('/url-path')
Solo un routing semplice morto:
this.$router.push('Home');
posso provare anche questo ...
router.push({ name: 'myRoute' })
Puoi anche utilizzare il v-bind direttamente sul modello come ...
<a :href="'/path-to-route/' + IdVariable">
il :
è l'abbreviazione di v-bind
.
`/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 } }"
Se qualcuno desidera il reindirizzamento permanente da una pagina /a
a 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"),
},
]
Quindi, quello che stavo cercando era solo dove mettere window.location.href
e 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 ..
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.