Vue 라우팅 가드의 세 가지 유형은 무엇입니까?

Vue에는 세 가지 유형의 라우팅 가드가 있습니다. 즉, 글로벌 라우팅 가드(글로벌 프론트 가드, 글로벌 포스트 가드), 내부 구성 요소 라우팅 가드, 경로 독점 가드(라우팅 구성 페이지에서 라우팅을 위해 별도로 구성됨)입니다. ) 경비원).

이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

경로 가드는 경로 가로채기를 사용하여 사용자가 로그인했는지 여부와 사용자에게 페이지 탐색 권한이 있는지 여부를 확인할 수 있습니다. 이는 세 가지 유형의 경로와 함께 구현되어야 합니다. Vue의 Guards 중 하나는 전역 경로 Guards이고, 하나는 구성 요소 내의 라우팅 가드이고 다른 하나는 라우터 전용 가드입니다.

소위 라우팅 가드는 단순히 문에 있는 보안 가드로 이해될 수 있습니다. 집에 들어가려면 보안 검사를 통과하고 경로 안내원에게 그 집이 어디서 왔는지 알려 주어야 합니다. 낯선 사람만 들어오게 할 수는 없나요? 어디로 갈까요? 그러면 경비원이 다음에 무엇을 해야 하는지 알려 주나요? 실제로 집주인이 출입을 허가한 사람이라면 입장이 허용됩니다. 그렇지 않으면 집주인에게 전화해서 집주인과 상의(로그인 및 등록)해야 합니다. 허가.

• 다음과 같이 현재 to.path가 입력하고 있는 경로가 로그인인지, 등록인지 확인합니다. 그렇다면 next()를 실행하여 현재 인터페이스를 표시합니다. 그렇지 않은 경우 경고가 표시된 후 로그인 인터페이스로 이동합니다.
• 사용자가 로그인하지 않은 경우 로그인 인터페이스가 항상 표시됩니다.

• router.beforeEach((to,from,next)=>{
    if(to.path == '/login' || to.path == '/register'){
      next();
    }else{
      alert('您还没有登录，请先登录');
      next('/login');
    }
  })

  로그인 후 복사

• 아래와 같이 경로를 전환할 때마다 확인을 클릭하면 현재 페이지가 표시됩니다.

• router.afterEach((to,from)=>{
    alert("after each");
  })

  로그인 후 복사

to를 실행하면 from 매개변수가 위 사용법과 일치합니다. 다음 콜백 함수는 약간 다릅니다.

• 를 직접 사용하는 경우 가드에 대한 특별한 경우가 있습니다. 이는 현재 데이터 속성에 접근할 수 없고 선언 주기와 관련하여 실행 순서가 일치하지 않기 때문입니다. 실행이 완료되기 전에 데이터 데이터가 렌더링되지 않았습니다. 따라서 여기서 next()는 완료를 돕기 위해 해당 콜백을 제공합니다.

• <script>
  export default {
      data(){
          return{
              name:"Arya"
          }
      },
      beforeRouteEnter:(to,from,next)=>{
          next(vm=>{
              alert("hello" + vm.name);
          })
      }
  }
  </script>

  로그인 후 복사
• 
  beforeRouteEnter:(to,from,next)=>{ alert("hello" + this.name);}进行访问admin页面，会发现alert输出hello undefined

2. 이 구성 요소를 종료할 때 beforeRouteLeave:(to,from,next)=>{}

beforeRouteLeave:(to,from,next)=>{
        if(confirm("确定离开此页面吗？") == true){
            next();
        }else{
            next(false);
        }
    }

더 많은 프로그래밍 관련 지식을 보려면

를 방문하세요! !

위 내용은 Vue 라우팅 가드의 세 가지 유형은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!