vue实现几秒后跳转新页面代码

当我们需要在vue中实现几秒后跳转到新页面时，可以通过使用定时器（setTimeout）实现。

步骤如下：

1.在需要实现跳转的组件或页面中导入Vue，使用Vue的原型链上的$router对象，使用其中的push()方法实现路由跳转。代码如下：

import Vue from 'vue'
export default {
  data () {
    return {
        //定义跳转秒数
        seconds: 3
     }
  },
  mounted () {
    //设置定时器，seconds*1000表示几秒后跳转
    setTimeout(() => {
         Vue.prototype.$router.push('/newpage')
     }, this.seconds * 1000)
  }
}

2.在需要实现跳转的组件或页面中使用全局的$route对象，$route对象中包含了当前页面的路由信息，使用其中的path属性改变路由信息，实现路由跳转。代码如下：

export default {
  data () {
    return {
        //定义跳转秒数
        seconds: 3
     }
  },
  mounted () {
    //设置定时器，seconds*1000表示几秒后跳转
    setTimeout(() => {
         this.$route.path = '/newpage'
     }, this.seconds * 1000)
  }
}

示例1：使用Vue的原型链上的$router对象，在登录成功后3秒后跳转到首页

<template>
  <div>
    <button @click="login">登录</button>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  data () {
    return {
        seconds: 3
     }
  },
  methods: {
    login() {
        //登录成功后启动跳转
        setTimeout(() => {
            Vue.prototype.$router.push('/home')
        }, this.seconds * 1000)
    }
  }
}
</script>

示例2：使用全局的$route对象，在用户没有输入密码的情况下，提示3秒密码错误，然后跳转回到登录页面重新输入

<template>
  <div>
    <p>请输入密码：</p>
    <input type="password" v-model="password">
    <button @click="submit">提交</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
        password: '',
        seconds: 3
     }
  },
  methods: {
    submit() {
        if (this.password === '') {
            //密码错误提示
            setTimeout(() => {
                this.$route.path = '/login'
            }, this.seconds * 1000)
        }
    }
  }
}
</script>

这两个示例提供了两种不同的实现方式，都是通过设置定时器实现几秒后跳转到新页面。具体实现方式可以根据具体情况进行选择。