Vue-router钩子beforeEach应用

本章概述

        vue-router提供了三个钩子函数，beforeEach，beforeResolve，afterEach，其中beforeEach最常使用，多是为了路由跳转做一些准备工作，如登录状态验证，身份验证等。beforeEach自带三个参数，（to，from，next），to为目标router对象，from为来源router对象，next是一个function，用来释放钩子。

next

        当next内可以传递router的path，有此参数时，会跳向这个path。这时beforeEach会又执行一次，因为重新跳转了。所以如果不做判断，next（'/.....'）会死循环。我们需要做如图1的判断。if中前半是需求判断，后半是防止死锁的判断。只有next（）；才能脱离钩子。

图1详解

        下图中做了两个判断：
        一个是to.matched.length ===0，如果为真就说明无法解析该路由，没有配置该路由。那么我就让页面跳转到一个404提示页。
        第二个是登录判断，从sessionStorage中读isLogin，如果为假则说明没有登录证明。需要先登录，跳转到登录页。
        只有已经登录并且目标路由存在，路由才会跳转过去，钩子也会释放。

        ps.钩子类的我都放在了main.js

查看源码

转载到其他平台需含本文的简书链接，vue技术我只在简书发布