全局前置、后置路由守卫
-
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()放行