이 글은 vue.js 컴포넌트 내부의 네비게이션 가드에 대한 소개를 담고 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
beforeRouteEnter
beforeRouteUpdate (2.2의 새로운 기능)
beforeRouteLeave
① beforeRouteEnter 컴포넌트에 들어가기 전에
구성요소가 이전에 호출되었습니다. , 구성 요소 인스턴스가 아직 생성되지 않았으며 this 키워드를 사용할 수 없습니다进入该组件之前被调用,组件实例还没有被创建,不能使用 this关键字
不过,你可以通过传一个回调给 next
그러나 콜백을 next
에 전달하면 구성 요소 인스턴스에 액세스할 수 있습니다. call back through next 인스턴스화된 컴포넌트는 NEXT 함수의 VM 매개변수를 this export default {
name: "Admin",
data(){
return{
infor:'hw'
}
},
beforeRouteEnter:(to,from,next)=>{
//此时该组件还没被实例化
alert(this.infor); //弹出消息框信息为 undefined
next(vm =>{
//此时该组件被实例化了
alert(vm.infor); //弹出消息框信息为 hw
})
}
}
e
export default {
name: "Admin",
beforeRouteLeave(to,from,next){
if(confirm("确定离开吗?") == true){
next() //跳转到另一个路由
}else{
next(false);//不跳转
}
}
}
관련 권장 사항:
vue.js 경로 표시 설정 방법 소개
위 내용은 vue.js 구성 요소 내부의 탐색 가드 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!