Vue.js路由route导航守卫

刺骨的言语ヽ痛彻心扉 2022-05-14 13:06 293阅读 0赞

**导航守卫：即在路由发生改变时通过跳转或取消的方式来守卫导航；**  
注意：*参数或查询的改变并不会触发进入/离开的导航守卫*；  
导航守卫的方式：**全局守卫、单个路由守卫、组件守卫**。

> route.js:

import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    const login = () => {
        import(/* webpackChunkName: login */ '../components/login/login.vue')
    }
    const homePage= () => {
        import(/* webpackChunkName: homePage*/ '../components/home/homePage.vue')
    }
    
    Vue.use(VueRouter)
    const route = [
        {
            path: '/login',
            name: "登陆",
            component: login 
        },
        {
            path: '/homePage/:id',
            name: "首页",
            component: homePage,
            // 【单个路由守卫】: 当跳转到当前路由时，执行该函数
            beforeEnter (to, from, next) {
                console.log('单个路由守卫 -> beforeEnter ')
                next()
            }
        }
    ]
    
    export default () => {
        return new VueRouter ({
            route ,
            mode: 'history',
            // 【全局守卫】：即当所有路由发生改变时，首先会执行这2个函数
            // 路由发生改变是最先执行的方法
            beforeEach (to, from, next) {
                // 每次路由跳转之前执行，比如判断用户是否登录(未登录就跳转到登录页)
                // to/from为路由跳转前/后的route对象
                // 在这里可以做相关的判断 ， 再执行next() 或 nexr({path: '/login'})
                next()
                console.log('全局守卫 -> beforeEach ')
            },
            beforeResolve (to, from, next) {
                console.log('全局守卫 -> beforeResolve ')
            },
            afterEach (to, from) {
                // 每次导航跳转之后触发
                console.log('全局守卫 -> afterEach ')
            }   
    
        })
    }

> homePage.vue :

<template> <div> <span> { { a1}}</span> </div> </template> <script> export default { data () { return { a1: 'homePage' } }, // 【组件守卫】 beforeRouteEnter (to, from, next) { // 当进入到当前组件时，首先触发的函数 console.log(' 组件守卫 -> beforeRouteEnter ') next(vm => { // 此时这个组件尚未被创建，因此通过this对象拿不到组件的上下文 // 如果想在这里拿到数据并赋值到该组件中，可以通过next()中的回调函数的vm完成 }) }, beforeRouteUpdate (to, from, next) { // 当前路由发生改变时(比如'/homePage/123' => '/homePage/456' ) console.log(' 组件守卫 -> beforeRouteUpdate ') next() }, beforeRouteLeave (to, from, next) { // 当离开当前组件跳转到其他路由时触发 // 比如 用户正在进行表单输入，还没有保存时点击了跳转到其他路由的按钮 // 此时可以弹出一个提示框，确认用户是否要放弃当前未保存的表单而跳转到新的路由 console.log(' 组件守卫 -> beforeRouteLeave ') next() } } </script>

当执行以上代码时，导航守卫打印的顺序为：

> 全局守卫 -> beforeEach  
> 单个路由守卫 -> beforeEnter  
> 组件守卫 -> beforeRouteEnter  
> 全局守卫 -> beforeResolve  
> 全局守卫 -> afterEach