Vue.js - 動的変数が存在しないときに代替コンポーネントをロードする

私はこれを数日間苦労しており、データのない動的URLをうまく処理する方法を期待していました。Vue.js - 動的変数が存在しないときに代替コンポーネントをロードする

Iは以下の経路を有する：Product成分で

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

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

を、Iは、製品のオブジェクトを持っていると、slug変数に応じて、表示する生成物をロードします。

私が抱えている問題は、URLが製品データセットに存在しないスラッグである場合です。 URLを更新せずにPageNotFoundコンポーネントを読み込みたいです。

これは可能ですか？アプリ全体で一貫した404ページを持つことはいいと思うし、商品表のv-ifで自分自身を繰り返さないようにしてもいいだろう。

私はそれを持っている最も近いが、このされています。しかし、これは非常に良いUXではありません、実際のURLを更新し

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

。

手がかりはありますか？

出典

2017-10-02 mikestreety

Product.vueに条件付きでPageNotFoundコンポーネントをレンダリングすると、クエリで結果が返されず、ルータをまったく操作する必要がなくなります。

出典

2017-10-02 22:47:55

ありがとう、カイル！それは完璧に聞こえる。コンポーネント内のコンポーネントを読み込む方法は？ – mikestreety

カイルが正しい方向に向いてくれたおかげで、これは私が思いついたものです。

ロードされ、私は少し異例であることと、サーバー側のコンポーネントとJavaScriptを使用しています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: PageNotFoundためES6である - Vueが自動的にAはその後、<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なのか分かりませんが、機能的なコンポーネントと同じアイデアをエミュレートしないことをお勧めしますリアクトコミュニティは励ましています。彼らはここで別の状況です。公式の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 - 動的変数が存在しないときに代替コンポーネントをロードする

答えて

関連する問題