乐趣区

vue导航守卫详解

概念

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

分类

全局路由一共分为三类:全局守卫,路由独享的守卫,组件内的守卫。

一、全局守卫

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

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

 以一个简单的例子来解释 router.beforeEach
假设我们现在做一个这样的需求,用户在未登录的时候进入任意页面,我们就让用户跳转到登录页面,在已登录的时候让用户正常跳
转到点击的页面。准备好三个组件:home.vue,login.vue,about.vue

home.vue 的内容:<template>
  <div class="hello">
    <button @click="$router.push('/about')"> 去关于页面 </button>
  </div>
</template>
<script>
  export default {
    name: 'home',
    data() {return {}
    }
  }
</script>
<style scoped>
</style>
login.vue 的内容:<template>
    <div> 登录页面 </div>
</template>
<script>
    export default {name: "about"}
</script>
<style scoped>
</style>
about.vue 的内容:<template>
    <div> 关于页面 </div>
</template>
<script>
    export default {name: "about"}
</script>
<style scoped>
</style>

router 配置文件内容:

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

我们可以看到,每次路由跳转,router.beforeEach 都会执行,并且接受三个参数,to 记录着将要进入的目标路由对象的详细,from 记录着即将离开的目标路由对象的信息,next() 表示执行下一步,router.beforeEach 就是全局路由跳转时触发执行的函数。

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()}

三、组件内守卫

 组件内守卫一共有三个:beforeRouteEnter,beforeRouteUpdate,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>
退出移动版