Vue路由守卫，Vue-router中的钩子函数

路由守卫

生命周期在vue从创建到销毁的过程当中执行。

但是对于每次请求，其实需要一部分限制，比如登录限制，比如校验。所以在路由上有路由守卫。

路由全局守卫

全局前置守卫

在路由跳转之前执行，有三个参数

to 目的地路由route对象

from 源路由route对象，注意直接使用路由跳转，容易失去from

next 跳转,默认跳转to的地址，可以自定义跳转地址

router.beforeEach

router/index.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router) //让vue使用Router

.......

var r = new Router({
    routes: router,
    linkActiveClass: "active",
    base: '/index/',
}) //导出路由对象，对象已经加载规则

r.beforeEach((to,from,next)=>{
    "to: 目的地路由的$route对象"
    "from: 源路由的$route对象"
    console.log(to,from)
    if(to.path==="/food"){
        return next('/index')
    }
    return next()
})

export default r

全局前置守卫，在工作当中主要用于，登录，权限等设置。

全局解析守卫

在 2.5.0+ 你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

import Vue from 'vue'
import Router from 'vue-router'
​
Vue.use(Router) //让vue使用Router

.....

r.beforeResolve((to,from,next)=>{
    console.log("beforeResolve+++++++++++++++++++++++++++++++++++")
    console.log(to,from)
    return next()
})
export default r

全局后置钩子

import Vue from 'vue'
import Router from 'vue-router'
​
Vue.use(Router) //让vue使用Router
​
......
​​​​​​​
r.afterEach((to,from)=>{
    console.log("afterEach+++++++++++++++++++++++++++++++++++")
    console.log("[2021-10-28 14:24:14 ]"+from.path+" TO "+to.path)
})
​
export default r

路由独享守卫

在beforeEach执行后执行，只单独对一个路由生效

import Vue from 'vue'
import Router from 'vue-router'
​
Vue.use(Router) //让vue使用Router
​
​
const router = [
    {
        path: "/login",
        component: ()=> import("../views/login.vue"),
        meta: {
            title: "登录"
        },
        beforeEnter(to,from,next){
            if(from.path === "/sf"){
                next()
            }else{
                next("/sf")
            }
            console.log("beforeEnter+++++++++++++++++++++++++++++++++++")
            console.log(to)
            console.log(from)
            next()
        }
    },
    .......
    {
        path: "*",
        component: ()=> import("../views/Page_404.vue")
    }
] //路由的规则

......
​
export default r

组件内守卫

<template>
  <div id="login_id">
      <div class="panel">
          <h2>登录</h2>
          <form>
              <button class="login_button" @click="login">登录</button>
          </form>
      </div>
  </div>
</template>
​
<script>
​
export default {
    methods: {
        login(){
            this.$router.push("/layout")
        }
    },
    beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    console.log(to,from)
    console.log("beforeRouteEnter+++++++++++++++++++++++++++++++++++")
    next()
    }, //进入组件后就执行，可以对用户的操作进行限制
    beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
 // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
 // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
    console.log(to,from)
    console.log("beforeRouteUpdate+++++++++++++++++++++++++++++++++++")
    next()
    }, // 在当前路由改变，检测提交的信息是否合法
    beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    console.log(to,from)
    console.log("beforeRouteLeave+++++++++++++++++++++++++++++++++++++++")
    next()
    } //对离开页面没有完成操作提醒
}
</script>
​
<style>
.......
</style>

按照执行顺序排序：

全局前置守卫

路由独享(beforeRouteLeave）

组件内守卫

全局解析

全局后置钩子