【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

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

<script>
	export default {
		name: 'app',
	}
</script>

三、步骤

router目录

2. 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

3. 在main.js中声明路由

import router from "@/router/index";

main.js作为总文件，基本框架搭建好后不需要经常修改，修改路由在index.js内修改

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

login.vue

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

<script>
export default {
	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)
				}
			}
		}	
</script>

最终会发送一条成功信息，并在3秒后跳转主页面