[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>
```
