を参照してください。$ router.push in setTimeout

Question

私はユーザーがウェブサイトにアクセスしたときにヒットするリンク先ページ'/'を持っています。その後、ローディングホイールを5秒間ロードしてからリダイレクトしたいと思いますログイン'/login'ページにアクセスしてください。

私はVueのとBulma.ioを使用して、私が持っている私のLanding.vueページでいます：私は私のルータ/ index.jsで

<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> 

：

/* 
    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 
    } 
    ] 
}) 

だから、そこにあり私の<スクリプト>のセクションで私の機能に何か間違っているでしょうか？

ありがとうございました。

Answer 1

スクリプトセクションを定義する場合は、実際のVueコンポーネントをエクスポートする必要があります。

<script> 

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

    } 
    } 

</script>