vue.js 구성 요소 내부의 탐색 가드 소개

이 글은 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

로 사용하고, 컴포넌트를 떠난 후 컴포넌트를 떠납니다. O er o BeforrateupDate 이 컴포넌트는 컴포넌트가 호출될 때 호출됩니다. 재사용하면 이 키워드를

    export default {
      name: "Admin",
      beforeRouteLeave(to,from,next){
          if(confirm("确定离开吗？") == true){
            next()   //跳转到另一个路由
          }else{
            next(false);//不跳转
          }
      }
    }

관련 권장 사항:

Vue.js 전역 라우팅의 전역 경로 아래 탐색 가드

vue.js 경로 표시 설정 방법 소개

위 내용은 vue.js 구성 요소 내부의 탐색 가드 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!