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

【问题标题】：How to auto change page with vue-router?如何使用 vue-router 自动更改页面？
【发布时间】：2019-08-15 06:48:12
【问题描述】：

正如标题所示，代码中有两页。我想先显示页面 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
    }
  ],

})

【问题讨论】：

标签： vue.js vue-router

【解决方案1】：

如果您希望从 HelloWorld 转换到 MyPage 组件，请使用 HelloWorld 组件的 created 或 mounted 挂钩，如下所示：

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

阅读更多关于hooks here的信息。

【讨论】：

【解决方案2】：

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

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

希望有帮助

【讨论】：