Vue路由守卫

最新推荐文章于 2024-08-16 18:42:25 发布

枫叶时代

最新推荐文章于 2024-08-16 18:42:25 发布

阅读量306

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_42278182/article/details/94590351

版权

本文详细介绍了Vue中的路由守卫，包括全局路由守卫beforeEach和afterEach，以及路由独享守卫。重点阐述了在beforeEach全局前置守卫中进行用户登录状态判断的重要性，并给出了具体实现示例。

摘要由CSDN通过智能技术生成

前言

路由是我们在做vue项目经常遇到的，这篇文章主要说下路由守卫（路由钩子）

一、路由导航介绍

路由守卫分为三类：

全局路由守卫
- beforeEach 全局前置守卫，
- afterEach 全局后置守卫

组件内路由守卫

  // 跟methods: {}等同级别书写，组件路由守卫是写在每个单独的vue文件里面的路由守卫
 	  1.beforeRouteEnter (to, from, next) {
 	        // 注意，在路由进入之前，组件实例还未渲染，所以无法获取this实例，只能通过vm来访问组件实例
 	        next(vm => {})
 	    }
 	   2.beforeRouteUpdate (to, from, next) {
 	        // 同一页面，刷新不同数据时调用，
 	    }
 	   3.beforeRouteLeave (to, from, next) {
 	        // 离开当前路由页面时调用
 	    }

router独享守卫
路由独享守卫是在路由配置页面单独给路由配置的一个守卫

 export default new VueRouter({
     routes: [
         {
             path: '/',
             name: 'home',
             component: 'Home',
             be