How to auto change page with vue-router?

0
votes

As the title suggests, there are two pages in the code. I want to show the page HelloWorld first then show next page myPage without any click. (maybe 2 sec after..) How to auto change a page with vue-router?

I know should set some code in setTimeout function.

index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import myPage from '@/components/myPage'



Vue.use(Router)


export default new Router({
  routes: [{
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/myPage',
      name: 'myPage',
      component: myPage
    }
  ],

})
2
vue.jsvue-router

2 Answers

2
votes

If you wish to transition from HelloWorld to MyPage component then use created or mounted hook of the HelloWorld component like this:

created() {
    setTimeout(() => {
        // You can also use replace() instead of push()
        this.$router.push('/myPage');
    }, 2000);
}

Read more about hooks here.

1
votes

You will have to do that in your HelloWorld.vue file. You will have something like this in the mount function of your HelloWorld.vue file 

mounted() {
    setTimeout(() => {
       this.$router.push('/next-route')
    }, 2000)
}

Hope that helps