Vue Router路由守卫超详细介绍
更新时间：2023年01月28日 09:10:46 作者：小五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路由守卫内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
我们在做了用户登录后,就会让用户跳转到个人中心,下面这篇文章主要给大家介绍了关于如何使用Vue+Element做个个人中心的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-06-06
这篇文章主要为大家详细介绍了vue实现纯前端表格滚动分页加载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
详细聊聊前端如何实现token无感刷新(refresh_token)
实现token无感刷新对于前端来说是一项非常常用的技术,其本质是为了优化用户体验,下面这篇文章主要给大家介绍了关于前端如何实现token无感刷新(refresh_token)的相关资料,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了Vue3中正确使用ElementPlus的示例代码,本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-01-01
这篇文章主要为大家详细介绍了在vue2中如何处理xml格式的数据,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考一下2024-03-03
使用Vue Composition API写出清晰、可扩展的表单实现
这篇文章主要介绍了使用Vue Composition API写出清晰、可扩展的表单实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
这篇文章主要介绍了mpvue 单文件页面配置详解，本文将介绍如何在 mpvue 官方模板的基础上，通过配置 mpvue-config-loader 来实现在 vue 文件内书写小程序的页面配置，感兴趣的小伙伴们可以参考一下2018-12-12
这篇文章主要介绍了Vue 实现前端权限控制的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
Axios是在前端开发中常用的一个发送 HTTP 请求的库，用过的都知道,篇文章主要给大家介绍了关于vue的相关资料,需要的朋友可以参考下2021-10-10
这篇文章主要为大家详细介绍了vue组件实现移动端九宫格转盘抽奖，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
最新评论