I have a landing page '/' that the user will hit when they go to our website, and then I have a loading wheel that I would like to load for 5 seconds and then redirect me to the login '/login' page.

I am using Vue and Bulma.io and in my Landing.vue page I have:

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

in my router/index.js I have:

/*
  Necessary imports...notice I imported the two ponents we will use( Login and Home)
*/
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/ponents/Login'
import Home from '@/ponents/Home'
import Landing from '@/ponents/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',
      ponent: Home   // created ponent
    },
    {
      path: '/login',   // this is the path in the URL
      name: 'Login',
      ponent: Login  // created ponent
    },
    {
      path: '/',      // this is the path in the URL
      name: 'Landing',
      ponent: Landing // created ponent
    }
  ]
})

So there has to be something wrong with my function in my < script > section, right?

Thanks for any help you might have.

I have a landing page '/' that the user will hit when they go to our website, and then I have a loading wheel that I would like to load for 5 seconds and then redirect me to the login '/login' page.

I am using Vue and Bulma.io and in my Landing.vue page I have:

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

in my router/index.js I have:

/*
  Necessary imports...notice I imported the two ponents we will use( Login and Home)
*/
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/ponents/Login'
import Home from '@/ponents/Home'
import Landing from '@/ponents/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',
      ponent: Home   // created ponent
    },
    {
      path: '/login',   // this is the path in the URL
      name: 'Login',
      ponent: Login  // created ponent
    },
    {
      path: '/',      // this is the path in the URL
      name: 'Landing',
      ponent: Landing // created ponent
    }
  ]
})

So there has to be something wrong with my function in my < script > section, right?

Thanks for any help you might have.

• javascript
• vue.js
• vuejs2

1 Answer 1

If you are defining a script section, you need to export an actual Vue ponent.

<script>

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

    }
  }

</script>