【6月日新计划更文活动】第9天

两个新的生命周期钩子

作用：路由组件独有的两个钩子，用于捕获路由组件的激活状态

具体名字：

• activated 路由组件被激活时触发
• deactivated 路由组件失活时触发

路由守卫

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

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

全局守卫

// 全局前置路由守卫 —— 初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to, from, next) => {
    console.log("前置路由守卫", to, from)
    // 权限校验
    // if (to.path == '/home/News' || to.path == '/home/Message') {
    // 用路径或者路由名皆可
    // if (to.name == 'xiaoxi' || to.name == 'xinxi') {
    //     if (localStorage.getItem('school') == 'AtGuigu') {
    //         next() //放行
    //     } else {
    //         alert("学校名不对，没有权限")
    //     }
    // } else {
    //     next() //放行    // }

    // meta 权限校验
    if (to.meta.isAuth) { // 判断是否需要鉴权
        if (localStorage.getItem('school') == 'AtGuigu') {
            next() //放行
        } else {
            alert("学校名不对，没有权限")
        }
    } else {
        next() //放行
    }
})
// 全局后置路由守卫 —— 初始化的时候被调用、每次路由切换 之后 被调用
router.afterEach((to, from) => {
    console.log("后置路由守卫", to, from)
    document.title = to.meta.title || "尚硅谷"
})