全局前置路由守卫

1.作用：控制路由的切换

beforeEach 在每一次路由切换之前都被调用，以及初始化的时候被调用

2.示例：

router.beforeEach((to,from,next)=>{
    console.log(to,from)
    if(to.path == "/home/news" || to.path == "/home/message"){
        if(localStorage.getItem('user') == "yecss"){
            next()
        }
        else{
            alert("当前用户没有访问权限")
        }
    }
    else{
        next()
    }
})

3.在路由配置中我们可以将自定义属性放到meta配置项中。

children:[
    {
        // 多级路由中的path不加斜杠
        path:'news',
        component: MyNews,
        // 是否需要鉴权
        meta:{isAuth:true},
    }
    
//应用
if(to.meta.isAuth){ //判断是否需要鉴权
        if(localStorage.getItem('user') == "yecss"){
            next()
        }
        else{
            alert("当前用户没有访问权限")
        }
}

全局后置路由守卫

afterEach 会在路由切换后调用，以及初始化的时候被调用。

// 后置路由守卫
router.afterEach((to,from)=>{
    // 切换当前网页的标题
    document.title = to.meta.title || "SPA"
    console.log("后置守卫",to,from);
})

独享路由守卫

某一个路由所独享的守卫，只有前置的，没有后置的。

{
    // 多级路由中的path不加斜杠
    path: 'news',
    component: MyNews,
    // 是否需要鉴权
    meta: { isAuth: true, title: '新闻', },
    beforeEnter(to, from, next) {
        if (to.meta.isAuth) { //判断是否需要鉴权
            if (localStorage.getItem('user') == "yecss") {
                next()
            }
            else {
                alert("当前用户没有访问权限")
            }
        }
        else {
            next()
        }
    },
},

组件内路由守卫

// 通过路由规则，进入该组件时被调用
beforeRouteEnter(to,from,next){
  console.log("进入",to,from,next);
  next()
},
// 通过路由规则，离开该组件时被调用
beforeRouteLeave(to,from,next){
  console.log("离开",to,from,next);
  next()
}