(供自己后期复习使用,如果如哪里不对希望指正)
路由守卫
-
作用:对路由进行权限控制
举个例子说明一下:比如登录淘宝,只有登陆了才能查看个人中心,没有登陆的话就不行,要是想通过强行修改路径跳转到个人中心也是不行的。 -
分类:全局守卫
包括:全局前置守卫(beforeEach)、全局后置守卫(afterEach)
独享守卫(注意没有后置守卫)
包括: 前置守卫(beforeEnter)
组件内守卫
包括:进入守卫(beforeRouteEnter )、离开守卫(beforeRouteLeave ) -
全局守卫:
//全局前置守卫:初始化时执行、每次路由切换前执行 router.beforeEach((to,from,next)=>{ //这里传三个参数to、from、next //这里简单说一下这三个参数to表示要去哪、from表示从哪来、next表示放行 console.log('beforeEach',to,from) if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制,这里的meta也是路由的一个参数,我们可以添加自己想添加的东西 if(localStorage.getItem('name') === 'xxx'){ //权限控制的具体规则,只有当那么为xxx时才能放行 next() //放行 }else{ alert('暂无权限查看') // next({name:'guanyu'}) } }else{ next() //放行 } }) //全局后置守卫:初始化时执行、每次路由切换后执行、一般可以用于跳转后改变该页面的title router.afterEach((to,from)=>{//注意全局后置守卫方法里只传两个参数to和from,没有next console.log('afterEach',to,from) if(to.meta.title){ document.title = to.meta.title //修改网页的title }else{ document.title = 'vue_test' } })
-
独享守卫:
beforeEnter(to,from,next){ console.log('beforeEnter',to,from) if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制 if(localStorage.getItem('name') === 'xxx'){ next() }else{ alert('暂无权限查看') // next({name:'guanyu'}) } }else{ next() } }
-
组件内守卫:
//进入守卫:通过路由规则,进入该组件时被调用 beforeRouteEnter (to, from, next) { }, //离开守卫:通过路由规则,离开该组件时被调用 beforeRouteLeave (to, from, next) { }