组件内路由守卫
选一个最简单的About
打开 About.vue
export default {
name: 'About',
components:{},
//当路由进入之前
//通过路由规则,进入该组件时被调用
beforeRouteEnter (to, from, next) {
// ...
},
//当路由离开之前
//通过路由规则,离开该组件时被调用
beforeRouteLeave (to, from, next) {
// ...
}
}
只有全局路由守卫我们称为前置和后置
前置后置的话,如果当前的位置是/home如果切换到/about会引起俩个路由守卫的调用
但是beforeRouteEnter和beforeRouteLeave,当你的路径在/home当你来到/about之前进入About组件之前,beforeRouteEnter调用了
如果页面还有一个导航项/test;你想从当前的/about位置离开,在走之前,人家给你调的是beforeRouteLeave
有的时候你不是通过路由规则进入组件的(通过一般组件形式:引入
,注册
,<组件名 />
)
你单独写在About这,只不过是About
组件独有的
进来的时候(beforeRouteEnter
)to
永远是about
,当你离开的时候(beforeRouteLeave
)from
也是about
相关的
总结
组件内守卫
//进入守卫:通过路由规则,进入该组件时被调用
beforeRouteEnter(to,from,next){
}
//离开守卫:通过路由规则,离开该组件时被调用
beforeRoutLeave(to,from,next){
}