Question

正如标题所示，代码中有两页。我想先显示 HelloWorld 页面，然后显示下一页 myPage ，无需任何点击。（也许是2秒后。。）如何使用vue-router自动更改页面？

我知道应该在setTimeout函数中设置一些代码。

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

})

Answer 1

如果您希望从HelloWorld过渡到MyPage组件，请使用 HelloWorld 组件的created或mounted钩子，如下所示：< / p>

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

详细了解hooks here。

Answer 2

您将必须在HelloWorld.vue文件中执行此操作。您的HelloWorld.vue文件的 mount 函数中将有类似的内容

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

希望有帮助

如何使用vue-router自动更改页面？

2 个答案: