vue--vuerouter--路由守卫

全局前置路由守卫

作用：一般用于路由也没跳转时，给与权限限制！！
在index.js路由配置中配置：

// 该文件用于专门创建路由器
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:[
       
    ]
})

// 全局前置路由守卫--初始化的时候被调用、 每次路由切换之前被调用
router.beforeEach((to,from,next)=>{
    console.log(to,from)
    if(to.path == '/home/news' || to.path == '/home/message'){
        if(localStorage.getItem('permission') === 'do'){
            next()//放行
        }else{
            alert('无权限查看！')
        }
    }else{
        next()
    }

})

export default router

结果：

2、路由元信息：路由中meta容器存放数据，在使用前置或后置时得到

配置：在配置路由路径时，添加meta:{isAuth:true}配置项，里面可以配置想加的信息

// 该文件用于专门创建路由器
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:[
        {
            path:'/home',
            component:Home,
            children:[
                {
                    // 二级路由路径不能加/
                    path:'news',
                    component:News,
                    meta:{isAuth:true}
                },
                {
                    // 二级路由路径不能加/
                    path:'message',
                    component:Message,
                    meta:{isAuth:true},
                }
            
            ]
        }
    ]
})

// 全局前置路由守卫--初始化的时候被调用、 每次路由切换之前被调用
router.beforeEach((to,from,next)=>{
    console.log(to,from)
    if(to.meta.isAuth){//判断是否需要鉴权
        if(localStorage.getItem('permission') === 'do'){
            next()//放行
        }else{
            alert('无权限查看！')
        }
    }else{
        next()
    }

})

export default router

结果：

3、后置路由守卫

作用：一般用于编写必须要能进入该路由（有权限）也没才能执行的代码：如：设置网页名：

// 后置路由守卫
router.afterEach((to,from)=>{
    console.log('后置路由守卫',to,from)
    document.title = to.meta.title || '无敌系统'
})

结果：

4、独享路由守卫：

作用：给单独某一个路由路径进行路由守卫操作

关键字配置项：beforeEnter
eg:

 {
                    // 二级路由路径不能加/
                    path:'news',
                    component:News,
                    meta:{isAuth:true,title:'新闻'},
                    beforeEnter:(to,from,next)=>{
                        console.log('前置路由守卫',to,from)
                        if(to.meta.isAuth){//判断是否需要鉴权
                            if(localStorage.getItem('permission') === 'do'){
                                next()//放行
                            }else{
                                alert('无权限查看！')
                            }
                        }else{
                            next()
                        }
                    }
                }

结果：

独享路由守卫没有后置路由守卫，直接用全局后置就行！！

5、组件内路由守卫

该配置在组件中自己的配置中配置；该钩子要通过路由规则进入时，才会被调用，直接使用组件标签不会被触发！

  // 通过路由规则，进入该组件时被调用
    beforeRouteEnter(to, from, next){

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

也可以进行权限校验：

<template>
    <div class="About">
        <h1>About</h1>
        <br>
        <ul>
        <li>
            <router-link active-class="active" to="/about/message">message</router-link>
        </li>
        </ul>
        <router-view></router-view>

    </div>    
</template>

<script>
export default {
    name:'About',
    data(){
        return{
        }
    },
    methods:{
    },
    // 通过路由规则，进入该组件时被调用
    beforeRouteEnter(to, from, next){
        console.log('前置路由守卫',to,from)
        if(to.meta.isAuth){//判断是否需要鉴权
            if(localStorage.getItem('permission') === 'do'){
                next()//放行
            }else{
                alert('无权限查看！')
            }
        }else{
            next()
        }
    },
    // 通过路由规则，离开该组件时被调用
    beforeRouteLeave (to, from, next) {
        console.log('APP--beforeRouteLeave')
        next()
    }
    
}
</script>

<style scoped>
    .About{
        background-color: bisque;
    }
</style>

结果：