Vue this. $ Router.push dans setTimeout

Question

J'ai une page d'atterrissage '/' que l'utilisateur va frapper quand ils vont sur notre site, et puis j'ai une roue de chargement que je voudrais charger pendant 5 secondes, puis me rediriger à la page de connexion '/login'.

J'utilise Vue et Bulma.io et dans ma page Landing.vue je:

<template> 
<div class="image"> 
    <img src="../assets/landing.png"> 
    <div class="loader loading"></div> 
</div> 
</template> 


<!-- Styles --> 
<style> 
    .loading { 
    border: 2px solid #dbdbdb; 
    border-radius: 290486px; 
    border-right-color: transparent; 
    border-top-color: transparent; 
    content: ""; 
    display: block; 
    height: 1em; 
    position: absolute; 
    width: 1em; 
    transform: translate(-50%,-50%); 
    margin-right: -50%; 
    top: 30%; 
    left: 50%; 
    } 
</style> 

<!-- Scripts --> 
<script> 
setTimeout(function() { this.$router.push({ path: '/login'})},5000); 
</script> 

dans mon routeur/index.js Je:

/* 
    Necessary imports...notice I imported the two components we will use(Login and Home) 
*/ 
import Vue from 'vue' 
import Router from 'vue-router' 
import Login from '@/components/Login' 
import Home from '@/components/Home' 
import Landing from '@/components/Landing' 

// Needed to make use of the vue-router system 
Vue.use(Router) 


export default new Router({ 

    // Define the routes...will add more when they are needed 
    routes: [ 
    { 
     path: '/home', // this is the path in the URL 
     name: 'Home', 
     component: Home // created component 
    }, 
    { 
     path: '/login', // this is the path in the URL 
     name: 'Login', 
     component: Login // created component 
    }, 
    { 
     path: '/',  // this is the path in the URL 
     name: 'Landing', 
     component: Landing // created component 
    } 
    ] 
}) 

Donc, il doit être quelque chose de mal avec ma fonction dans ma section de script <, non?

Merci pour toute aide que vous pourriez avoir.

Answer 1

Si vous définissez une section de script, vous devez exporter un composant Vue réel.

<script> 

    export default { 
    created(){ 
     setTimeout(() => this.$router.push({ path: '/login'}), 5000); 

    } 
    } 

</script>