路由守卫

在大多数后台应用中，通常要用户登录才可以使用核心功能。例如：访问后台主页时，要用户处于已登录状态，如果未登录，则跳转到登陆页面。用户在登陆页面进行登陆操作，若登录成功，则跳转到后台主页；若登录失败，则返回登陆页面。伪类控制路由的访问权限，可以用导航守卫来实现。

    导航守卫分为全局导航守卫、导航独享守卫和组件导航守卫

全局导航守卫：包括全局前置守卫beforeEach()和全局后置守卫afterEach()，在路由即将改变前和改变后进行触发

导航独享守卫：目前只有beforeEnter()守卫，只有在路由导航到一个不同的页面时才会被触发，beforeEnter()守卫只试用于单个路由

组件导航守卫：包括beforeRouteEnter()、beforeRouteUpdate()、beforeRouteLeave()3个守卫。其中，beforRouteEnter()守卫在路由进入之前被触发；beforeRouteUpdate()守卫在路由更新之前被触发；beforeRouteLeave()守卫在路由离开之前被触发

    在实际开发中， 全局导航守卫比较常用，下面主要讲解全局导航守卫的定义和使用

全局导航守卫会拦截每个路由规则，从而对每个路由进行访问权限的控制，定义全局导航守卫的代码如下：

const router =createRouter()
router.beforeEach((to,from,next) => {} )
router.afterEach((to,from,next) => {} )

在上述代码中，调用beforeEach()方法定义了全局前置守卫，调用afterEach()方法定义了全局后置守卫。每个全局导航守卫方法中接收3个形参：to、from和next。其中，to表示目标路由对象；from表示当前导航正要离开的路由对象；next()为函数，如果不接收next()函数，则默认允许用户访问每一个路由；如果接收了next()函数， 则必须调用next()函数，否则不允许用户访问任何一个路由。

    除此之外，next()函数具有三种调用方式，分别为next()、next(false)和next('/')。其中，next()表示执行下一个钩子函数；next(false)表示强制停留在当前页面；next('/')表示跳转到其他地址。