Vue Router路由守卫超详细介绍
作者：小五ccc
路由守卫，简单理解来说就是，当用户要进行一些操作时，我需要用户的一些信息或数据或行为，我判断过后，才会同意用户进行操作，说到这里，我想大家心里都或多或少有点理解了吧
全局前置&后置路由守卫
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路由守卫内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！