Vue Router路由守卫超详细介绍

全局前置&后置路由守卫

router/index.js

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;

说明

router.beforeEach()是全局前置路由守卫

router.afterEach()是全局后置路由守卫

③ to:目的地路由信息

④ from: 出发地路由信息

⑤ next:是个函数,只有调用next(),路由器才可继续跳转,不调用直接拦截

⑥ routes中的meta配置项,可配置一些自定义的参数

独享路由守卫

router/index.js

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) => {}
	}]
	}]
});

说明

① 组件内部的beforeEnter()是独享前置路由守卫

② 独享路由守卫只有前置没有后置

③ 独享路由守卫与全局路由守卫可一起搭配使用

组件内路由守卫

Detail组件

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

说明

beforeRouteEnter(),通过路由,进入组件之前被调用

beforeRouteLeave(),通过路由,离开组件之前被调用

③ 两者都需要调用next()放行

作者:小五ccc原文地址:https://blog.csdn.net/wytccc/article/details/128735384

%s 个评论

要回复文章请先登录注册