Vue——路由守卫（全局前置路由守卫beforeEach、全局后置路由守卫router.afterEach、独享路由守卫beforeEnter、组件内路由守卫）

- 日理万妓 2024-04-06 12:00 8阅读 0赞

作用：对路由进行权限控制

分类：全局守卫、独享守卫、组件内守卫

**目录**

一、全局前置路由守卫router.beforeEach（切换之前调用，to、from、next参数）

改进代码

二、全局后置路由守卫router.afterEach（ 切换之后调用，to、from参数，没有next参数）

三、独享路由守卫beforeEnter（某一个路由所单独享用的，只有前置没有后置）

四、组件内路由守卫（在组件内编写）

beforeRouteEnter 进入前

beforeRouteLeave 离开后

--------------------

## 一、全局前置路由守卫router.beforeEach（切换之前调用，to、from、next参数） ##

![ee2454478e9042bd95c6478a4aec866a.png][]

全局前置路由守卫——初始化的时候被调用、每次路由切换之前被调用

// 该文件专门用于穿件整个应用的路由器
    import VueRouter from 'vue-router'
    
    import About from '../pages/About'
    import Home from '../pages/Home'
    import News from '../pages/News'
    import Message from '../pages/Message'
    import Detail from '../pages/Detail'
    
    // 创建一个路由器
    const router = new VueRouter({
    
        routes:[
            // 一级路由
            {   
                name:'guaunyu',
                // 如果路径是 /about  我们就展示About这个名字的组件
                path:'/about',
                component: About
            },
            {
             name:'zhuye',
             path:'/home',
             component: Home,
            //  二级路由
             children:[
                {
                    name:'xinwen',
                    // 二级路由不加斜杠
                    path:'news',
                    component:News
                },
                {
                    // 二级路由不加斜杠
                    path:'message',
                    component:Message,
                    // 三级路由
                    children:[
                    {
                        name:'xiangqing',
                        path:'detail/:id/:title',
                        component:Detail,
    
                        // props的第一种写法，值为对象  所有key-value都会一props的形式传给Detail组件
                        // props:{a:1,b:'hello'}
    
    
                        // props的第二种写法，值为布尔值,若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件
                        // props:true
                        // props的第三种写法，值为函数
                        props($route){
                            return{
                                id:$route.params.id,
                                title:$route.params.title,
                            }
                        }
                    }
                    ]
                }
             ]
            },
        
        ]
    })
    
    // 暴露之前添加路由守卫
    // 全局前置路由守卫
    // 有A路由向B路由跳转时 只要形成路由跳转，在切换之前进行调用（每一次切换之前进行调用）
    // 除此之外还有初始化的时候被调用 
    router.beforeEach((to,from,next)=>{
        // console.log(to,from)
        // if(to.name==='xinwen' || to.name==='xiaxoi') 这种写法也可以
        if(to.path ==='/home/news' || to.path ==='/home/message'){
            if(localStorage.getItem('school' ) === 'atguigu'){
                next()
            }else{
                alert('学校名不对，无权限查看')
            }
        }else{
            next()
        }
    
    
    })
    
    export default router

![7c74e50e95754389a2e9a3a6903e61b4.png][]

如下如所示，如果我们校验的情况下很多，我们不可能一个一个的校验，那样比较麻烦，我们也不是很推荐下面这种写法，下面我们再学习一个新的

![a98bdb70e6594c99834a3caf2f26d9b2.png][]

#### 改进代码 ####

// 该文件专门用于穿件整个应用的路由器
    import VueRouter from 'vue-router'
    
    import About from '../pages/About'
    import Home from '../pages/Home'
    import News from '../pages/News'
    import Message from '../pages/Message'
    import Detail from '../pages/Detail'
    
    // 创建一个路由器
    const router = new VueRouter({
    
        routes:[
            // 一级路由
            {   
                name:'guaunyu',
                // 如果路径是 /about  我们就展示About这个名字的组件
                path:'/about',
                component: About,
            },
            {
             name:'zhuye',
             path:'/home',
             component: Home,
            //  二级路由
             children:[
                {
                    name:'xinwen',
                    // 二级路由不加斜杠
                    path:'news',
                    component:News,
                    meta:{
                        // 是否授权
                        isAuth:true
                    }
                },
                {
                    // 二级路由不加斜杠
                    path:'message',
                    component:Message,
                    meta:{
                        // 是否授权
                        isAuth:true
                    },
                    // 三级路由
                    children:[
                    {
                        name:'xiangqing',
                        path:'detail/:id/:title',
                        component:Detail,
                        // props的第一种写法，值为对象  所有key-value都会一props的形式传给Detail组件
                        // props:{a:1,b:'hello'}
    
                        // props的第二种写法，值为布尔值,若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件
                        // props:true
                        // props的第三种写法，值为函数
                        props($route){
                            return{
                                id:$route.params.id,
                                title:$route.params.title,
                            }
                        }
                    }
                    ]
                }
             ]
            },
        
        ]
    })
    
    // 暴露之前添加路由守卫
    // 全局前置路由守卫
    // 有A路由向B路由跳转时 只要形成路由跳转，在切换之前进行调用（每一次切换之前进行调用）
    // 除此之外还有初始化的时候被调用 
    router.beforeEach((to,from,next)=>{
        //  判断是否需要鉴定一下权限
        if(to.meta.isAuth){
            if(localStorage.getItem('school' ) === 'atguigu'){
                next()
            }else{
                alert('学校名不对，无权限查看')
            }
        }else{
            next()
        }
    
    })
    
    export default router

## 二、全局后置路由守卫router.afterEach（ 切换之后调用，to、from参数，没有next参数） ##

![74185bf5432e42d08df2f42ca5b9dcc8.png][]

全局后置路由守卫——初始化的时候被调用、每次路由切换之后被调用

需求：当我们更换组件之后，要求页面的title也会跟着修改

我们应该先配置一下**每个组件的meta对象，增加一个title属性**，当我们点击这个组件的时候，获取这个title，将其放到页面的title上面

meta:{
                            // 是否授权
                            isAuth:true,
                            title:'详情'
                        },

// 全局后置路由守卫——初始化的时候被调用、每次路由切换之后被调用
    router.afterEach((to,from)=>{
        // 这个地方没有next了，因为已经切换完了，也没办法守卫了
    
        // 因为如果运行这个函数的话，说明已经切换完了，我们完全可以修改网页的title了
        document.title = to.meta.title || '硅谷系统'
    })

## 三、独享路由守卫beforeEnter（某一个路由所单独享用的，只有前置没有后置） ##

需求：对某一个路由（新闻路由）做出限制

![bef6efe96d0d4f3f9fca5b705a5c22b4.png][]

![b916a256d2e24166871b788e21ac64e8.png][]

children:[
                {
                    name:'xinwen',
                    // 二级路由不加斜杠
                    path:'news',
                    component:News,
                    meta:{
                        // 是否授权
                        isAuth:true,
                        title:'新闻'
                    },
                    beforeEnter:(to,from,next)=>{
                         //  判断是否需要鉴定一下权限
                        if(to.meta.isAuth){
                            if(localStorage.getItem('school' ) === 'atguigu'){
                                next()
                            }else{
                                alert('学校名不对，无权限查看')
                            }
                        }else{
                            next()
                                    }
                    }
                    
                },

## 四、组件内路由守卫（在组件内编写） ##

![eb133630d58d48ef88ed660fb0e3980c.png][]

###  **beforeRouteEnter 进入前** ###

通过路由规则，进入该组件时被调用

// 通过路由规则，进入该组件时被调用
      beforeRouteEnter (to, from, next) {
        //  判断是否需要鉴定一下权限
        if(to.meta.isAuth){
            if(localStorage.getItem('school' ) === 'atguigu'){
                next()
            }else{
                alert('学校名不对，无权限查看')
            }
        }else{
            next()
        }

###  **beforeRouteLeave 离开后**  ###

通过路由规则，离开该组件时被调用（这个不能说是后置，因为进入之后并不会触发 而是离开这个组件之前会触发）

// 通过路由规则，离开该组件时被调用
        beforeRouteLeave (to, from, next) {
          next()
        }

[ee2454478e9042bd95c6478a4aec866a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/30a492f8c39c4343b249e964c7b2a2cb.png
[7c74e50e95754389a2e9a3a6903e61b4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/e948b884193545d78eb198db91c7f112.png
[a98bdb70e6594c99834a3caf2f26d9b2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/95daf96bc25841c49a092b8a30e0279d.png
[74185bf5432e42d08df2f42ca5b9dcc8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/2a187efdf0494add81522ce833d9501d.png
[bef6efe96d0d4f3f9fca5b705a5c22b4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/86afa1ce174a4bbb9522013947c3b19e.png
[b916a256d2e24166871b788e21ac64e8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/f42d6e57dfab4645913f46e16b2e07ec.png
[eb133630d58d48ef88ed660fb0e3980c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/9ebc4b9945f14f6ab9bdaa9485c83f64.png