路由守卫（导航守卫）

路由的改变会触发导航守卫

1.组件内守卫

三个钩子函数

beforeRouteEnter(to,from,next){} to:即将要进入的路由对象 form:从哪一个路由离开的对象 next:函数，跳转路由 next();//默认跳转to next(false);//取消跳转 next(router);//跳转到对应router 注：不能用this,如果必须要拿this,可以给next一个回调函数 next(function(vm){ //vm->this console.log(vm.$route.params.id); }); beforeRouteUpdate(to,from,next){} //左20右10,发现不匹配，触发方法，但20依旧是20，当右30时，在于20比，又不匹配，又触发方法， 注:此方法和wath不同 //若想要拿到from的id则用this.$route.params.id //若想要拿到to的id则用to.params.id beforeRouteLeave 离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。 例子： beforeRouteLeave (to,from,next) { if(confirm('是否确认离开页面')){ next(); }else{ next(false); } },

2.全局守卫

判断用户是否登录(token) beforeEach(to,from,next){} afterEach(to,from,next){} 例子： router.afterEach((to, from, next) => { alert('用户是否登录？？'); })

3.路由独享守卫

beforeEnter(to,form,next){}

也可以使用watch来监听$route

watch:{ '$route':function(newobj,oldobj){ alert() //当第一次左手拿到10时，第二次右手拿到20，发现不匹配，将右手的20赋值给左手的10，当再从20点回10时，又更新 } },