Vue学习:全局路由守卫beforeEach、afterEach

点---》会出现路由组件，但是有些组件---又特定要求才能显示组件---》在路由规则里面进行要求设置

创建路由

const router =  new VueRouter({
    routes:[
        {
            name:'guanyu',
            path:'/about',
            component:About,
            meta:{title:'关于'}
        },....
}

对路由器+路由首位

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

/a 转换成为 /b 会调用 next()继续运行

接收三个参数起点from起点 to终点

router.beforeEach((to,from,next)=>{
    console.log('前置路由守卫',to,from)
})

需要对路径进行判断

if(localStorage.to.path==='/home/news'||localStorage.to.path==='/home/message'

简化路径

if(localStorage.to.name==='xinwen'||localStorage.to.name==='xiaoxi'

但是当路径过多(给to里面+属性--你放的参数)

routes:[
        {
            name:'guanyu',
            path:'/about',
            component:About,
            meta:{title:'关于'}
        },

meta:{isAuth:true,title:'新闻'}

对这两个权限进行配置

if(to.meta.isAuth){ //判断是否需要鉴权
}

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

最后暴露

export default router

全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用 切换完成之后执行 没有next (切换完成后next不需要了)

为了在主页面显示--在后置 前置路由不可 因为你点击了路径变了。但实际上你没有登录进去

  document.title = to.meta.title || '系统'

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