Vue Router路由守卫超详细介绍

import Vue from 'vue';
import VueRouter from 'vue-router';
import List from '@/pages/List'
Vue.use(VueRouter);
const router = new VueRouter({
	routes: [{
		path: '/list',
		component: List,
		meta: {  // 路由元数据
			title: '列表'
			...   // 可自定义配置参数
		}
	}]
});
// 前置：在路由切换之前调用
router.beforeEach((to, from, next) => {});
// 后置：在路由切换成功之后调用
router.afterEach((to, from) => {});
export default router; 

import Vue from 'vue';
import VueRouter from 'vue-router';
import List from '@/pages/List';
import Detail from '@/pages/Detail';
Vue.use(VueRouter);
export default new VueRouter({
	routes: [{
		path: '/list',
		component: List,
		children: [{
			path: 'detail',
			component: Detail,
			// Detail组件独享此路由守卫
			beforeEnter: (to, from, next) => {}
		}]
	}]
});

<template>
	<div></div>
</template>
<script>
export default {
	name: 'Detail',
	// 通过路由，进入组件之前调用
	beforeRouteEnter(to, from, next) {},
	// 通过路由，离开组件之前调用
	beforeRouteLeave(to, from, next) {}
}
</script>