全局前置&后置路由守卫
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()放行
到此这篇关于Vue Router路由守卫超详细介绍的文章就介绍到这了,更多相关Vue Router路由守卫内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
