Je voudrais faire une redirection Vue.js
similaire au javascript vanille
window.location.href = 'some_url'
Comment pourrais-je y parvenir dans Vue.js?
Je voudrais faire une redirection Vue.js
similaire au javascript vanille
window.location.href = 'some_url'
Comment pourrais-je y parvenir dans Vue.js?
Réponses:
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.
Uncaught ReferenceError: router is not defined
erreur, comment injecter le routeur dans le composant?
this.$router.push('routename)
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')
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.
À 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')
Juste un routage très simple:
this.$router.push('Home');
peut essayer ça aussi ...
router.push({ name: 'myRoute' })
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
.
`/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 } }"
Si quelqu'un souhaite une redirection permanente d'une page /a
vers 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"),
},
]
Donc, ce que je cherchais était seulement où mettre le window.location.href
et 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.
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.