>  기사  >  웹 프론트엔드  >  vue.js 구성 요소 내부의 탐색 가드 소개

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

不言
不言원래의
2018-08-23 16:38:431797검색

이 글은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.