全局导航守卫（璀璨砖石）
全局前置守卫（进）
1.在routers文件夹下创建一个router.js文件，在入口文件（main.js）里面导入这个文件：
import './routers/router';
2.在router.js导入：
import 'router' from ‘index’
router.beforeEach((to,from,next)=>{
console.log('to',to)//to是目标路由
console.log('from',from)//from是当前路由
next()//next是to和from连接的桥梁，参数为ture，false，
})
全局解析守卫（使用方式和全局前置守卫一样，新的钩子）
1.router.beforeResolve
全局后置守卫
1.router.afterEach((to,from)=>{//用来做用户友好提示信息
if(to.path==='/mine/login'){
confirm('欢迎你')
}
})
路由独享守卫（不屈白银）
1.写在路由表里面：beforeEnter(to,from,next) {}
组件内守卫（最强王者）
1.组件内前置守卫(数据预载)
<script>
export default {
beforeRouteEnter(to,from,next){
//这个阶段没有this
console.log('beforeRouteEnter')
next()
fetch（‘data.json’）.then(res=>res.json).then(res=>{
next（vm=>{//vm就是当前组件
vm.$set(vm.categorys,'data',data)//vm.categorys是vm里面的数据，'data'是自定义的数据，data是合并后的数据，此方法底层是object.assign()
}）
})
},
data(){
return{
categoryscategorys:{}
}，
beforeCreate(){
console.log('beforecreate')
}
}
</script>
2.组件内后置守卫（用来做用户友好提示信息）
<script>
export default {
beforeRouteLeave(to,from,next){
//这个阶段有this
if（this.usename）{
next()
}else{
if(confirm('你确定要离开吗')){
next（）
}else{
next（false）
}
}
}
}
</script>
3组件内更新守卫（组件发生改变时重新发送请求渲染页面）
<script>
export default {
beforeRouteUpdata(to,from,next){
//这个阶段有this
}
}
</script>
来源：https://www.cnblogs.com/zjp-com/p/11455961.html