【Vue前端】路由延迟跳转

前言
仅此作个人学习记录

一、安装相关依赖
npm install vue-router
npm i element-ui

二、引入库
main.js

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import Router from 'vue-router'

Vue.use(Router);
Vue.use(ElementUI);

new Vue({

router,
render: h => h(App)

}).$mount('#app')

app.vue

<div id="app">
    <!-- 路由出口 -->
    <router-view></router-view>  
  </div>

export default {
    name: 'app',
}

三、步骤
router目录

1. index.js

//声明
import login from '../components/login.vue'
import home from '../components/home.vue'

//创建路由
const routes = [

{
    path: '/',
    name: 'Home',
    redirect: '/login'
},
{path:"/login",component:login},
{path:"/home",component:home}

]

//定义路由实例
const router = new Router({
routes
})
export default router

1. 在main.js中声明路由

import router from "@/router/index";
1
main.js作为总文件，基本框架搭建好后不需要经常修改，修改路由在index.js内修改

1. components目录下新建login.vue、home.vue

login.vue

<el-container>
    <el-button @click.native.prevent="handleLogin">登录</el-button>
</el-container>

name: 'login',
data() {
    return {
        count:''
    },
    methods:{
        handleLogin{
            this.$message.success("登录成功，3秒后返回主页面");
            const timejump = 3;
            if(!this.timer){
                this.count = timejump ;
                this.show = false;
                this.timer = setInterval(() => {
                    if(this.count > 0 && this.count <= timejump ){
                        this.count--;
                    }else{
                        this.show = true;
                        clearInterval(this.timer);
                        this.timer = null;
                        //跳转的页面写在此处
                        this.$router.push({path: '/home'});
                    }
                },100)
            }
        }
    }