Home » vue » How to auto change page with vue-router?

How to auto change page with vue-router?

Posted by: admin November 26, 2021 Leave a comment

Questions:

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
    }
  ],

})
Answers:

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.

###

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