Vue2.0 Vue路由 全局后置路由守卫

前置路由守卫知识

全局后置路由守卫

router.afterEach((to,from,next)=>{
    console.log(to,from,next)
})

输出:

{name: 'zhuye', meta: {…}, path: '/home', hash: '', query: {…}, …} 
{name: null, meta: {…}, path: '/', hash: '', query: {…}, …}[[Prototype]]: undefined

所以在后置路由守卫中next是没有的。切换已经完成了，再给你next有什么用吗?

从某种角度来说，我得有个next才能控制

后置路由的作用

一般来说好一点的项目他都会做一个功能:

标签确实是你一上来的标题，点击about的时候，把你的标签变了，叫关于

点击home的时候标签变成主页

登录(要有一个本地存储值为school-bilibili)点击News变成信息,点击Message标题变成消息

js可以

document.title = "名字"

但是这样固定死标题了，所以:

//给每一个路由都添加一个元信息
//比如guanyu
meta:{title.'关于'}

然后:

router.beforeEach((to,from,next)=>{
    console.log('to=',to,'from=',from)
    document.title = to.meta.title//添加这一行
    if(to.meta.isAuth){
        if(localStorage.getItem('school') === 'bilibili'){
            next()
        }else{
            alert('学校名不对或没有，无权限查看')
        }
    }else{
            next()
    }
})

但是你写的不对，因为一上来undefined,所以:

document.title = to.meta.title || '学习Vue'

在刷新的时候有一瞬间还是你的项目名，你要么改package里面的名字或者index.html里面的<title>

但是你本地存储没有school-bilibili但是点击了news虽然不给你呈现和发出弹窗警告，但是你的title却改成了News的名字，所以你直接改改早了

你写在放行前，这里要写俩次，所以放在这里不合适,所以说可以用到后置路由守卫

router.afterEach((to,from)=>{
    console.log(to,from)
    document.title = to.meta.title || '学习Vue'
})

全局后置路由守卫作用:初始化的时候被调用、每次切换路由之后被调用

全局体现在我都是跟router进行对话的；切换之前都走前置路由守卫，切换之后都是走后置路由守卫

总结

路由守卫

1.作用:对路由进行权限控制

2.分类:全局守卫、独享守卫、组件内守卫

3.全局守卫:

//全局前置守卫:初始化时执行、每次路由切换前执行
router.beforeEach((to,from,next)=>{
    console.log('beforEach',to,from,next)
    if(to.meta.isAuth){//判断当前路由是否需要进行权限控制
        if(localStorage.getItem('school') === 'bilibili'){
            next()//放行
        }else{
            alert('无权限查看')
        }
    }else{
        next()//放行
    }
})

//全局后置守卫:初始化时执行、每次路由切换后执行
router.afterEach((to,from)=>{
    console.log('afterEach',to,from)
    if(to.meta.title){
        document.title = to.meta.title //修改网页的title
    }else{
        document.title = '项目名'
    }
})

标签：Vue,后置,title,next,守卫,meta,路由,Vue2.0
来源： https://blog.csdn.net/yasinawolaopo/article/details/122451034