인컴포넌트 내비게이션가드 콜백이 작동하지 않음: Nuxt JS 및 "beforeRouteEnter"

인컴포넌트 내비게이션가드 콜백이 작동하지 않음: Nuxt JS 및 "beforeRouteEnter"

저는 Nuxt JS로 검색 폼과 결과 페이지 빌드를 가지고 있습니다..pages/results/index.vue 페이지로 pages/search/index.vue에러가 반환되는 경우.

Vue 설명서에 따라 구성 요소 내 가드를 사용하려고 합니다.

문서에 따르면:

단, 콜백을 다음으로 넘겨서 인스턴스에 액세스할 수 있습니다.네비게이션이 확인되면 콜백이 호출되고 컴포넌트인스턴스가 인수로 콜백에 전달됩니다.

beforeRouteEnter (to, from, next) {
  next(vm => {
    // access to component instance via `vm`
  })
}

// version info

├─┬ nuxt@2.10.1
│ ├─┬ @nuxt/builder@2.10.1
│ │ └─┬ @nuxt/vue-app@2.10.1
│ │   └── vue@2.6.10  deduped
│ └─┬ @nuxt/core@2.10.1
│   └─┬ @nuxt/vue-renderer@2.10.1
│     └── vue@2.6.10  deduped
└─┬ vue-glide-js@1.3.12
  └── vue@2.6.10

큰 는 의 next()네비게이션 가드의 기능이 페이지 재루팅에 기능하지 않는 것 같습니다.

(시작 페이지)

// page/search/index.vue

<template>
  ...
  <nuxt-link to="/results" @click.native="doSearch">
    Show Results
  </nuxt-link>
  ...
</template>

<script>
export default {
  ...
  methods: {
    doSearch () {
      ... // validates search fields and adds content to store
    }
  },
  ...
}
</script>

잘 작동하며, 서는 잘 한다.doSearch는 폼을 검증하고 (오류와 함께) 결과를 저장소에 추가합니다.

하지만 그 다음에...

(페이지까지)

// pages/results/index.vue

<script>
export default {
  ...
  beforeRouteEnter (to, from, next) {
    next((vm) => {
      console.log(vm.validateRoute()) // works: '/search'
      vm.validateRoute()              // does not work: does nothing
    })
  },
  ...
  computed: {
    errors () {
      return this.$store.state.errors
    }
  },
  ...
  async fetch ({ store, params }) {
    await store.dispatch('searchresults/GET_RESULTS')
  },
  ...
  methods: {
    validateRoute () {
      let route = true
      if (this.errors.length > 0) {
        route = '/search'
      }
      console.log(this.erros.length)  // works: 7
      console.log(route)              // works: '/search'
      return route
    }
  },
  ...
}
</script>

의 beforeRouteEnter는 평가되지 않는 것으로 보여 루트가 변경되지 않습니다.로깅에 콜백이 기동되어 적절한 값이 반환되고 있는 것을 알 수 있습니다.

콜백 함수를 사용하지 않고 루트를 명시적으로 정의하면 다음과 같이 동작합니다.

// pages/results/index.vue

<script>
export default {
  ...
  beforeRouteEnter (to, from, next) {
    next('/search')                   // works: re-routes to '/search' every time
  },
  ...
}
</script>

.next(callback)★★★★★★★★…

next(() => { return false })          // does not work

next(function () { return false })    // does not work

하지만 명시적인 선언만이 효과가 있다...

next({ path: false })                 // works: prevents route change

next({ path: '/search' })             // works: changes route to '/search'

이거 버그인가요, 아니면 제가 뭘 놓쳤나요?

부록

여기 Nuxt 매뉴얼에 기재되어 있는 미들웨어를 사용해 본 적이 있습니다.그러나, 이 블로그 투고에서 설명한 바와 같이, 이것은 끝없는 루프를 낳았습니다.

// middleware/validate.js

export default function ({ store, redirect }) {
  console.log('middleware: validate')           // 'middleware: validate'
  if (store.state.errors.length > 0) {
    return redirect('/search')                  // ...endless loop
  }
  return true                                   // otherwise this works
}

// nuxt.config.js

export default {
  ...
  router: {
    middleware: "validate"
  },
  ...
}

고정된.

@ifaruki가 지적한 바와 같이 페이지컴포넌트 내에 미들웨어 콜을 배치하면 무한 루프 문제가 해결됩니다.

다음 단계에서는 다음과 같이 미들웨어를 페이지 페이지/결과/index.vue에 추가합니다.

export default {
   middleware: 'validate'
} 

문서 맨 끝에 있는 Vue JS In-component Guards의 Nuxt 메서드로 보입니다.

특정 레이아웃 또는 페이지에 미들웨어를 추가할 수도 있습니다.

pages/index.vue ★★★★★★★★★★★★★★★★★」layouts/default.vue

: facepalm:

에는 nuxt.js라는 속성이 .middleware.

해서 '아까불까불까불까불까불까불까불까불까불까불까불까불까불까불까불까요?middleware 예를 들어, 파일을 만듭니다.validate.js.

고객님의 고객명validate.js에 검증 .file 수 、 수 、 수 、 file 、 file 、 file 、 in file in in 。

export default function ({ store, redirect }) {
  if (store.state.errors.length > 0) {
    return redirect('/search')
  }
}

이치노입니다.pages/results/index.vue다음과 같습니다.

export default {
   middleware: 'validate'
} 

vue 인스턴스가 생성되기 전에 항상 미들웨어가 호출됩니다.언제든지store.state.errors0이 크면 다시 로 리다이렉트 됩니다./search그렇지 않으면 이 미들웨어는 무시됩니다.

nuxt가 항상 vue.documents 또는 vue.documents 라우터와 같은 동작을 하는 것은 아니기 때문에 항상 먼저 nuxt docs를 읽어주세요.공식 문서:https://nuxtjs.org/api/pages-middleware

언급URL : https://stackoverflow.com/questions/58496743/in-component-navigation-guard-callback-not-working-nuxt-js-and-beforerouteente