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