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


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.


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


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


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()
    }, 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(() => {
    }, 2000)

Hope that helps