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

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

转载请说明出处内容投诉
CSS教程_站长资源网 » Vue——路由守卫(全局前置路由守卫beforeEach、全局后置路由守卫router.afterEach、独享路由守卫beforeEnter、组件内路由守卫 )

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买