Nuxt 라우터에서 동적으로 구성 요소 선택

Nuxt 라우터에서 동적으로 구성 요소 선택

모든 언어에 대해 동일한 구성요소를 제공하고 싶다.번역은 부품 안에서 할 것이다.URL 및 구성 요소 관계는 다음과 같아야 한다.

pseudocode:
browserurl: "/blogpost_1"
nuxtcomponent: "blogpost_1"

browserurl: "/en/blogpost_1"
nuxtcomponent: "blogpost_1"

browserurl: "/randompage"
nuxtcomponent: "randompage"

browserurl: "/en/randompage"
nuxtcomponent: "randompage"

나의 접근방법은 다음과 같은 것이었는데, 불행히도 pathMatch에 접속할 수 있는 방법을 찾을 수 없다.

router: {
   extendRoutes(routes, resolve){
   routes.push({
     path: 'en/*',
     component: resolve(__dirname, '/' + somehow.access.pathMatch )
})
}

}

구성 요소를 동적으로 해결할 수 없을 것 같아. component:예상 구성요소 인스턴스 또는 약속.약속이 해결되면 결과가 캐시된다.나는 내비게이션 가드를 이용한 해결책과 "손에 의한" 부품 교환을 상상할 수 있지만, 그것은 손으로 보는 것 등을 통해 정보를 가져와야 한다.

따라서 nnxt에 의해 생성된 경로를 다시 작성하여 옵션 경로 세그먼트를 포함하는 것이 가장 좋은 방법임/about로/:lang(en|jp)?/about그래서 그것은 다음과 같은 길을 받아들인다운/en/about) - 그러면 구성 요소가 수신됨lang에 대해 비어 있는 매개 변수/about그렇지 않으면 그것은 언어를 포함할 것이다...

1. 메타에서 사용 가능한 번역 정의
2. 번역으로 페이지 경로 다시 쓰기

페이지에서:

<script>
export default {
  meta: {
    translations: ['en', 'jp']
  }
}
</script>

Nuxt 구성(의사 - 테스트되지 않음)

router: {
    extendRoutes(routes, resolve) {
        const routesWithTranslation = routes.filter(i => i.meta.translations && i.meta.translations.length > 0);

        routesWithTranslation.forEach(route => {
            const segment = `/:lang(${route.meta.translations.join("|")})?`
            route.path = segment + route.path           
        })
}

참조URL: https://stackoverflow.com/questions/59392801/dynamically-choose-compontent-in-nuxt-router