Vue 라우팅 가드에는 어떤 유형이 있나요?

Vue에는 세 가지 라우팅 가드가 있습니다. 1. 전역 가드 "router.beforeEach" 2. "beforeRouteEnter" 구성 요소 내의 가드 3. 경로 독점 가드 "beforeEnter".

Vue에는 세 가지 유형의 라우팅 가드가 있습니다. 하나는 전역 라우팅 가드, 하나는 구성 요소 내 라우팅 가드, 다른 하나는 라우팅 독점 가드입니다.

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

 // 通过这个匹配判断是否有该权限或要求，这个一般作为页面权限设置，比如哪些页面需要登录才能进入，哪些不需要
to.matched.some(res => res.meta.requireAuth)

1. 전역 가드

1. router.beforeEach((to,from,next)=>{})

2. 콜백 함수의 매개변수, to: 들어갈 경로, from: 어떤 경로 Enter Route Leaves, next: 기능은 보고 싶은 라우팅 페이지를 표시할지 여부를 결정합니다.

3 다음 예를 들어보세요. main.js에 전역 가드를 설정하세요

• main.js에는 경로 인스턴스화 개체 라우터가 있습니다. main.js에서 가드를 설정하는 것은 이미 전역 가드입니다.
• 다음과 같이 현재 to.path가 입력하고 있는 경로가 로그인인지, 등록인지 확인합니다. 그렇다면 next()를 실행하여 현재 인터페이스를 표시합니다. 그렇지 않은 경우 경고가 표시된 후 로그인 인터페이스로 이동합니다.
• 사용자가 로그인하지 않은 경우 로그인 인터페이스가 항상 표시됩니다.

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

4. 전역 포스트후크 router.afterEach((to,from)=>{})

• 에는 to: 들어갈 경로, from: 출발할 경로라는 두 개의 매개변수만 있습니다.
• 아래와 같이 경로를 전환할 때마다 확인을 클릭하면 현재 페이지가 표시됩니다.

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

5. store.gettes.isLogin === false 로그인 여부를 결정합니다

2. 구성 요소 내에서 보호합니다

1. 이 구성 요소에 도달하면 beforeRouteEnter:(to,from,next)=> }

• Admin.vue 파일에서 관리자 경로로 이동하기 위해 클릭할 때 beforeRouteEnter 함수
• to를 실행하면 from 매개변수가 위 사용법과 일치합니다. 다음 콜백 함수는 약간 다릅니다.
• 다음 예에서 볼 수 있듯이 데이터 구성 요소에서
  beforeRouteEnter:(to,from,next)=>{ alert("hello" + this.name);}进行访问admin页面，会发现alert输出hello undefined를 직접 사용하는 경우 가드에 대한 특별한 경우가 있습니다. 이는 현재 데이터 속성에 접근할 수 없고 선언 주기와 관련하여 실행 순서가 일치하지 않기 때문입니다. 실행이 완료되기 전에 데이터 데이터가 렌더링되지 않았습니다. 따라서 여기서 next()는 완료를 돕기 위해 해당 콜백을 제공합니다.

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

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

• 다른 구성 요소를 클릭할 때 종료를 확인할지 여부를 결정합니다. next() 실행을 확인하고, next(false) 실행을 취소하고 현재 페이지에 머뭅니다.

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

3. 전용 가드 라우팅

1. beforeEnter:(to,from,next)=>{}, 사용법은 전역 가드와 일치합니다. 라우팅 개체 중 하나에 작성하면 이 경로에서만 작동합니다.

관련 권장 사항:

2020 프론트 엔드 vue 인터뷰 질문 요약(답변 포함)

vue 튜토리얼 권장 사항: 2020년 최신 5 vue.js 비디오 튜토리얼 선택

자세히 더 많은 프로그래밍 관련 지식이 있으면 프로그래밍 학습 코스를 방문하세요! !

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