组件内守卫beforeRouteEnter和beforeRouteLeave

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

一个坑：beforeRouteEnter 和 afterRouteLeave 是没有【r】的！！！

beforeRouteEnter用法和其他守卫差不多。

有个注意的地方就是beforeRouteEnter不能用this获取组件内收据。

在next()方法内存入vm这个参数，获取组件内数据。

beforeRouteEnter(to,from,next){ next(vm=>{vm.data}) }

例子：

<template>
<div>test</div>
</template>
<script>
export default {
name: "Test",
data () {
return {
data:"数据"
};
},
beforeRouteEnter(to,from,next){
if(to.path==="/test"){
alert("请登录");
next(vm=>{
console.log(vm.data); }) next('/login')
}
}}
</script>
<style lang="css" scoped>
</style>

beforeRouteLeave用来判断页面是否离开

例子：

<template>
<div>
test
</div>
</template>
<script>
export default {
name: "Test",
data () {
return { };
},beforeRouteLeave(to,from,next){
if(confirm("离开么？")){
next();
}else{
next(false)
}
}
}
</script>
<style lang="css" scoped>
</style>