[TOC]
### 组件内守卫
* [ ] 作用：监听当前组件中，进入之前，离开之前的逻辑处理
*****
### 用户进入之前 beforeRouteEnter
* [ ] 示例：
>[danger] 注意！！！
> beforeRouteEnter 该钩子函数执行时，页面还没渲染，内部调用不到 this
> 要调用 this 必须在next( vm => { } )函数内调用
> vm 就是当前实例对象
```
<template>
<div>
Login
</div>
</template>
<script>
export default {
/**
* @params to 当前路由对象
* @params from 上一次访问的路由对象
* @params next 继续向下执行
*/
beforeRouteEnter (to, from, next) {
// 页面进入之前执行
// 注意：该钩子函数执行时，当前页面还没有渲染，this 调用不到当前实例对象
next(vm => {
// 要调用当前实例对象，必须在回调函数内调用，vm就是当前实例
console.log(vm) // vm === this
})
}
}
</script>
<style lang="scss" scoped>
</style>
```
*****
### 用户离开之前 beforeRouteLeave
* [ ] 作用：用户离开当前页面之前做的操作
* [ ] 比如：用户离开前，询问用户是否离开，离开则跳转其他页面，不离开则停留当前页面
```
<template>
<div>
Login
</div>
</template>
<script>
export default {
/**
* @params to 当前路由对象
* @params from 上一次访问的路由对象
* @params next 继续向下执行
*/
beforeRouteLeave (to, from, next) {
const status = confirm('您确定要离开吗？')
if (status) {
// 离开 跳转到其他路由
next()
} else {
// 不离开，停留在当前页面
next(false)
}
}
}
</script>
<style lang="scss" scoped>
</style>
```
