vue导航守卫详解

概念

导航守卫又称为路由守卫，实时监控路由跳转时的过程，在路由跳转的各个过程中执行相应的操作，类似于生命周期函数，在开发过程中经常被使用，比如用户点击一个页面，如果未登录就调用到登陆页面，已登录就让用户正常进入。

分类：

全局路由一共分为三类：全局守卫，路由独享守卫，组件内守卫

一、全局守卫

全局守卫有三种：

1. router.beforeEach (全局前置守卫)
2. router.beforeResolve (全局解析守卫)
3. router.afterEach (全局后置守卫)

1. router.beforeEach (全局前置守卫)

每次跳转，router.beforeEach 都会执行，并且接收三个参数

to： 记录着将要进入的目标路由对象的信息。

from：记录着即将离开的目标路由对象的信息。

next：表示执行下一步。

router.beforeEach就是全局路由跳转时触发执行的函数

import Vue from 'vue'
import Router from 'vue-router'
import home from '@/components/home'
import login from '@/components/login'
import about from '@/components/about'
 
Vue.use(Router)
const ISLOGIN = true   //登录状态模拟
const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: home,
    },
    {
      path: '/login',
      name: 'login',
      component: login
    },
    {
      path: '/about',
      name: 'about',
      component: about
    }
  ]
})
 
router.beforeEach((to, from, next) => {   //全局全局前置守卫
  //to : 将要进入的目标路由对象
  //from : 即将离开的目标路由对象
  //执行跳转的下一步钩子
  console.log(to)
  console.log(from)
  if(to.name != 'login'){ //如果不是登录页面
    if(ISLOGIN)next()   //已登录就执行跳转
    else next({name:'login'})   //否则跳转到登录页面
  }else{ //如果是登录页面
    if(ISLOGIN)next({name:'/'}) //已登录就跳转到首页
    else  next()  //否则正常进入登录页面
  }
})
export default router

2. router.beforeResolve(全局解析守卫)

和全局前置守卫类似，区别是在跳转被确认之前，同时在所有组件内守卫和异步路由组件都被解析之后，解析守卫才调用。

3. router.afterEach(全局后置钩子)

只接受 to 和 from ，不会接收 next 函数也不会改变导航本身

二、路由独享守卫

独享守卫只有一种：beforeEnter

该守卫接收的参数与全局守卫是一样的，但是该守卫只在其他路由跳至配置有 beforeEnter 路由表信息时才生效。

router配置文件内容：

{
   path: '/about',
   name: 'about',
   component: about,
   beforeEnter:(to,from,next)=>{
      console.log(to);
      console.log(from);
      next()
   }

三、组件内守卫

组件内守卫一共有三个：

1. beforeRouterEnter(进入该路由时执行), 
2. beforeRouteUpdate(该路由中参数改变时执行),
3. beforeRouteLeave(离开该路由时执行)

<template>
  <div>关于页面</div>
</template>
<script>
  export default {
    name: "about",
    beforeRouteEnter(to, from, next) {
      //进入该路由时执行
    },
    beforeRouteUpdate(to, from, next) {
      //该路由参数更新时执行
    },
    beforeRouteLeave(to, from, next) {
      //离开该路由时执行
    }
  }
</script>
<style scoped>
</style>