Vue.js - 동적 변수가 없을 때 대체 구성 요소로드 중

저는 며칠 동안이 작업에 어려움을 겪었으며 데이터가없는 동적 URL을 적절하게 처리하기를 기대했습니다.Vue.js - 동적 변수가 없을 때 대체 구성 요소로드 중

나는 다음과 같은 경로가 다음 Product 구성 요소에서

const router = new VueRouter({ 
    routes: [ 
    {path: '/product/:slug', component: Product}, 

    {path: '/404', component: PageNotFound, alias: '*'} 
    ] 
});

을, 나는 slug 변수에 따라 제품의 객체를 가지고 있고, 표시하는 제품을로드합니다.

내가 가지고있는 문제는 URL이 제품 데이터 집합에없는 슬러그 일 때입니다. URL을 업데이트하지 않고 PageNotFound 구성 요소를로드하고 싶습니다.

이것이 가능합니까? 앱 전체에서 404 페이지의 일관성을 유지하는 것이 좋으며 제품 표에 v-if으로 나 자신을 반복하지 않아도 좋을 것입니다.

내가에있어 가장 가까운 이것이다 :

이

if(!product) { 
    this.$router.replace({path: '/404', query: {product: this.$route.params.slug}}); 
}

그러나, 이것은 UX 매우 좋지 않아 실제 URL을 업데이트합니다.

실마리가 있습니까?

출처

2017-10-02 mikestreety

쿼리가 아무런 결과도 반환하지 않으면 귀하의 PageNotFound 구성 요소를 조건부로 Product.vue에 렌더링 할 수 있으며 라우터를 전혀 조작 할 필요가 없습니다.

출처

2017-10-02 22:47:55

고마워, 카일! 그것은 완벽하게 들린다. 구성 요소 내에서 구성 요소를로드하는 방법은 무엇입니까? – mikestreety

Kyle이 올바른 방향으로 나를 가리켜 주신 덕분에, 이것이 내가 생각해 낸 것입니다.

로드 내가 약간 정통되는 서버 측 구성 요소와 자바 스크립트를 사용하고 Becuase, 나는 이미 내 페이지를 찾을 수 없음 한 구성 요소 - 다음과 같습니다 : 나는 PageNotFound.js 파일 확인했다

const PageNotFound = { 
    name: 'PageNotFound', 

    template: `<div> 
    <h1>404 Page Not Found</h1> 
    <p>Head back to the <router-link to="/">home page</router-link> and start again.</p> 
    </div>` 
};

위에서 주목해야 할

const ProductPage = { 
    name: 'ProductPage', 

    template: `<div> 
    <div v-if="product"><h1>{{ product.title }}</h1></div> 
    <page-not-found v-if="notFound"></page-not-found> 
    </div>`, 

    components: { 
    PageNotFound 
    }, 

    data() { 
    return { 
     notFound: false 
    } 
    }, 

    computed: { 
    product() { 
     let product; 

     if(Object.keys(this.$store.state.products).length) { 
     product = this.$store.state.products[this.$route.params.slug]; 

     if(!product) { 
      this.notFound = true; 
     } 
     } 

     return product; 
    } 
    } 
};

것들 : 내 제품 구성 요소 전에 HTML에로드 된, 그래서 나는 다음을 수행 할 수 있었다

이 PageNotFound: PageNotFound위한 ES6이다 - -

데이터 제품은 PageNotFound 성분에 로딩
존재한다면, 따라서 검사보고 비동기로드되는 뷰가 자동으로 그 요소는 다음을 갖는다
<page-not-found></page-not-found> 소자를 만든다 v-if가 트리거됩니다. 제품이 없으면 첫 번째 컨테이너가 존재하지 않으므로 404 구성 요소 만 표시됩니다.
제품 데이터가 아직로드되어있는 경우 404 플래시가 발생하므로 제품을 기반으로하지 않습니다. API를 통해
URL 매개 변수를 props (see docs)으로 지정하는 것이 더 좋습니다. 어느 시점에서해야 할 일입니다.

결론적으로, 동적 경로가있는 URL을 유지하면서 SPA (단일 페이지 응용 프로그램) 전체에 일관된 404 페이지를 표시 할 수 있습니다.URL을 업데이트하지 않고 다른 구성 요소를로드하거나 다른 구성 요소를 표시 할 수 있으며 동적 경로에 대해 와일드 카드 404를 사용할 수도 있습니다.

앞으로 모든 사람들에게 도움이되고 도움이되기를 바라며 ~ 4 시간의 시행 착오와 인터넷 검색을 낭비하지 않기 바랍니다. (그리고 예 "키워드"와 문구가 누군가를 찾을 수 있도록이 대답을 채웠습니다 ...)

출처

2017-10-03 20:42:46 mikestreety

안녕하세요, 다른 말 : 나는 다른 응용 프로그램의 내부에서이 라이브러리를 활용하고 있는지, 아니면 완전히 Vue.js인지 확실하지 않지만 기능적 구성 요소와 동일한 아이디어를 모방하려고하지 않는 것이 좋습니다. React 커뮤니티는 권장합니다. 그들은 여기 다른 상황입니다. 앞으로 Vue.js 공식 스타일 가이드를 따르십시오. 아마도 당신의 삶이 더 쉬워 질 것입니다 : https://vuejs.org/v2/style-guide/ –

미안 해요, 카일. 무슨 뜻인지 잘 모르겠다 고요? Vue는 기능 구성 요소 (https://github.com/vuejs/vue/releases/tag/v2.0.0-alpha.5)를 가지고 있거나 그렇지 않은 것입니까? 당신의 도움을 주셔서 감사합니다! – mikestreety

당신이 그것을 활용하려면 Vue api에서 '기능적 : 사실'을 확립해야합니다. 서서히 말하면, 성능 향상을 얻지 못하고 구문의 명확성을 잃어 버리는 것입니다. 또한 제품 구성 요소에 계산 된 데이터와 데이터가 있으며 이는 비 상태가 아닙니다. 구성 요소에 상태 비 저장이 없으면 작동 할 수 없으며 작동해서는 안됩니다. 하나의 .Vue 파일에'template, script, style' 태그의 전형적으로 공식적으로 추천 된 구조를 고수하도록 강력히 권합니다. https://vuejs.org/v2/guide/render-function.html#Functional-Components –

Vue.js - 동적 변수가 없을 때 대체 구성 요소로드 중

답변

관련 문제