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

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

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

目录

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

改进代码

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

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

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

 beforeRouteEnter 进入前 

 beforeRouteLeave 离开后 

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

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

javascript">// 该文件专门用于穿件整个应用的路由器
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',
            ***ponent: About
        },
        {
         name:'zhuye',
         path:'/home',
         ***ponent: Home,
        //  二级路由
         children:[
            {
                name:'xinwen',
                // 二级路由不加斜杠
                path:'news',
                ***ponent:News
            },
            {
                // 二级路由不加斜杠
                path:'message',
                ***ponent:Message,
                // 三级路由
                children:[
                {
                    name:'xiangqing',
                    path:'detail/:id/:title',
                    ***ponent: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

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

改进代码

// 该文件专门用于穿件整个应用的路由器
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',
            ***ponent: About,
        },
        {
         name:'zhuye',
         path:'/home',
         ***ponent: Home,
        //  二级路由
         children:[
            {
                name:'xinwen',
                // 二级路由不加斜杠
                path:'news',
                ***ponent:News,
                meta:{
                    // 是否授权
                    isAuth:true
                }
            },
            {
                // 二级路由不加斜杠
                path:'message',
                ***ponent:Message,
                meta:{
                    // 是否授权
                    isAuth:true
                },
                // 三级路由
                children:[
                {
                    name:'xiangqing',
                    path:'detail/:id/:title',
                    ***ponent: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参数）

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

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

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

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

// 全局后置路由守卫——初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from)=>{
    // 这个地方没有next了，因为已经切换完了，也没办法守卫了

    // 因为如果运行这个函数的话，说明已经切换完了，我们完全可以修改网页的title了
    document.title = to.meta.title || '硅谷系统'
})

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

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

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

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

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