路由导航守卫

全局导航守卫（璀璨砖石）

全局前置守卫（进）

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