Vue 라우터에서 대상 구성 요소를 동적으로 설정하는 방법

Vue 라우터에서 대상 구성 요소를 동적으로 설정하는 방법

나는 vue-roouter 경로의 대상 구성요소를 동적으로 설정하려고 한다.

그 이유는 타겟에 맞는 구성요소를 알기 위해 서버에서 데이터를 검색해야 하기 때문이다.

내가 생각한 한 가지 해결책은 다음과 유사한 글로벌 가드를 추가하는 것이었다.

router.beforeEach((to, from, next) => {
  get_data_from_server(to.fullPath).then(() => {
    // set the "to" component, but how?
    next();
})

그러나, 코멘트가 말했듯이, "구성요소"를 어떻게 설정할 것인가? - "to" 객체에는 구성 요소 속성이 없다.(구성 요소.default.render에 있는 것처럼 보이지만, 문서화되지 않았으며, 잘못되어서는 안 될 것 같다.)

또 다른 대안은 위의 논리를 사용하는 것이지만 리디렉션할 특수 사례 코드를 추가하는 것이지만, 나는 올바른 구성 요소를 목표로 하는 동적/새로운 경로를 만들 방법이 없다는 것을 알았다.

빌드타임에 알 수 없는 목적지로 가는 루트를 만들려면 어떻게 해야 할까?

이 해결책은 효과가 있는 것 같다.

router.beforeEach((to, from, next) => {
  get_data_from_server(to.fullPath).then(component => {
    if (to.matched.length === 0) {
      // the target route doesn't exist yet
      router.addRoutes({path: to.path, component: component})
      next(to.fullPath)
      return
    } else {
      // the route and component are known and data is available
      next()
    }
})

위 코멘트에서 구현하는 부에루터 커밋을 보여주는 링크를 찾는 것이 관건이었다.addRoutes().

한 가지 유의해야 할 점은 마지막에 새로운 경로가 추가된다는 것이다(마이스 센스). 따라서 존재하는 와일드카드는 의도하지 않은 일치를 만들어낼 수 있다.나는 기본 페이지로 리디렉션되는 캐치볼 루트가 있었다.그러나 그것은 더 이른 리스트였기 때문에 새로 추가된 시합 전에 일치했다.그리고 그것은 스택 오버플로를 야기했다.실제로 다음 코드if (to.matched.length === 0)기본 경로.

참조URL: https://stackoverflow.com/questions/43163131/how-can-i-dynamically-set-destination-component-in-vue-router