Vue——路由守卫（全局前置路由守卫beforeEach、全局后置路由守卫router.afterEach、独享路由守卫beforeEnter、组件内路由守卫 ）

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

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

目录

一、全局前置路由守卫router.beforeEach（切换之前调用，to、from、next参数）

改进代码

二、全局后置路由守卫router.afterEach（ 切换之后调用，to、from参数，没有next参数）

三、独享路由守卫beforeEnter（某一个路由所单独享用的，只有前置没有后置）

四、组件内路由守卫（在组件内编写）

beforeRouteEnter 进入前

beforeRouteLeave 离开后

一、全局前置路由守卫router.beforeEach（切换之前调用，to、from、next参数）

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

// 该文件专门用于穿件整个应用的路由器import VueRouter from 'vue-router'import About from '../pages/About'import Home from '../pages/Home'import News from '../pages/News'import Message from '../pages/Message'import Detail from '../pages/Detail'// 创建一个路由器const router = new VueRouter({routes:[// 一级路由{ name:'guaunyu',// 如果路径是 /about我们就展示About这个名字的组件path:'/about',component: About},{ name:'zhuye', path:'/home', component: Home,//二级路由 children:[{name:'xinwen',// 二级路由不加斜杠path:'news',component:News},{// 二级路由不加斜杠path:'message',component:Message,// 三级路由children:[{name:'xiangqing',path:'detail/:id/:title',component:Detail,// props的第一种写法，值为对象所有key-value都会一props的形式传给Detail组件// props:{a:1,b:'hello'}// props的第二种写法，值为布尔值,若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件// props:true// props的第三种写法，值为函数props($route){return{id:$route.params.id,title:$route.params.title,}}}]} ]},]})// 暴露之前添加路由守卫// 全局前置路由守卫// 有A路由向B路由跳转时 只要形成路由跳转，在切换之前进行调用（每一次切换之前进行调用）// 除此之外还有初始化的时候被调用 router.beforeEach((to,from,next)=>{// console.log(to,from)// if(to.name==='xinwen' || to.name==='xiaxoi') 这种写法也可以if(to.path ==='/home/news' || to.path ==='/home/message'){if(localStorage.getItem('school' ) === 'atguigu'){next()}else{alert('学校名不对，无权限查看')}}else{next()}})export default router

如下如所示，如果我们校验的情况下很多，我们不可能一个一个的校验，那样比较麻烦，我们也不是很推荐下面这种写法，下面我们再学习一个新的

改进代码

// 该文件专门用于穿件整个应用的路由器import VueRouter from 'vue-router'import About from '../pages/About'import Home from '../pages/Home'import News from '../pages/News'import Message from '../pages/Message'import Detail from '../pages/Detail'// 创建一个路由器const router = new VueRouter({routes:[// 一级路由{ name:'guaunyu',// 如果路径是 /about我们就展示About这个名字的组件path:'/about',component: About,},{ name:'zhuye', path:'/home', component: Home,//二级路由 children:[{name:'xinwen',// 二级路由不加斜杠path:'news',component:News,meta:{// 是否授权isAuth:true}},{// 二级路由不加斜杠path:'message',component:Message,meta:{// 是否授权isAuth:true},// 三级路由children:[{name:'xiangqing',path:'detail/:id/:title',component:Detail,// props的第一种写法，值为对象所有key-value都会一props的形式传给Detail组件// props:{a:1,b:'hello'}// props的第二种写法，值为布尔值,若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件// props:true// props的第三种写法，值为函数props($route){return{id:$route.params.id,title:$route.params.title,}}}]} ]},]})// 暴露之前添加路由守卫// 全局前置路由守卫// 有A路由向B路由跳转时 只要形成路由跳转，在切换之前进行调用（每一次切换之前进行调用）// 除此之外还有初始化的时候被调用 router.beforeEach((to,from,next)=>{//判断是否需要鉴定一下权限if(to.meta.isAuth){if(localStorage.getItem('school' ) === 'atguigu'){next()}else{alert('学校名不对，无权限查看')}}else{next()}})export default router

二、全局后置路由守卫router.afterEach（ 切换之后调用，to、from参数，没有next参数）

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

需求：当我们更换组件之后，要求页面的title也会跟着修改

我们应该先配置一下每个组件的meta对象，增加一个title属性，当我们点击这个组件的时候，获取这个title，将其放到页面的title上面

meta:{// 是否授权isAuth:true,title:'详情'},

// 全局后置路由守卫——初始化的时候被调用、每次路由切换之后被调用router.afterEach((to,from)=>{// 这个地方没有next了，因为已经切换完了，也没办法守卫了// 因为如果运行这个函数的话，说明已经切换完了，我们完全可以修改网页的title了document.title = to.meta.title || '硅谷系统'})

三、独享路由守卫beforeEnter（某一个路由所单独享用的，只有前置没有后置）

需求：对某一个路由（新闻路由）做出限制

 children:[{name:'xinwen',// 二级路由不加斜杠path:'news',component:News,meta:{// 是否授权isAuth:true,title:'新闻'},beforeEnter:(to,from,next)=>{ //判断是否需要鉴定一下权限if(to.meta.isAuth){if(localStorage.getItem('school' ) === 'atguigu'){next()}else{alert('学校名不对，无权限查看')}}else{next()}}},

四、组件内路由守卫（在组件内编写）

beforeRouteEnter 进入前

通过路由规则，进入该组件时被调用

// 通过路由规则，进入该组件时被调用beforeRouteEnter (to, from, next) {//判断是否需要鉴定一下权限if(to.meta.isAuth){if(localStorage.getItem('school' ) === 'atguigu'){next()}else{alert('学校名不对，无权限查看')}}else{next()}

beforeRouteLeave 离开后

通过路由规则，离开该组件时被调用（这个不能说是后置，因为进入之后并不会触发 而是离开这个组件之前会触发）

// 通过路由规则，离开该组件时被调用beforeRouteLeave (to, from, next) {next()}