クリックして、ページのURLではなく、コンテンツ/データを変更

Question

物語：

私は、製品ページ#/product/7上と同じページに午前私はあるものに類似している4つのより多くの製品を持っています見ている。これらのすべての商品には、ページへのリンクがあります。

router-link(:to="{ name: 'product', params: { id: product.id }}" v-text='product.title')

問題：私は、製品のリンクのいずれかにURLの変更をクリックしますが、内容は同じまま

。だから、私が#/product/7にいて、#/product/8をクリックすると、URLだけが変更されます。 /product/:idページから製品をクリックすると、適切な内容のページが表示されます。

あなたはスクリーンショットで見ることができるよう、現在の製品IDは15ですが、私はなめらかなシルクのシャツ製​​品の上にマウスを移動している間に下部にあるURLに示すように、コンテンツは、ID 7からのものですカート内。 これを修正する方法はありますか？

Answer 1

vueがページのリロードを最適化し、同じルート上にいる場合にはリロードしないように、ルートを変更するときに製品のデータを更新する必要があります。

あなたがアプローチを適応させることができます：Fetching Before Navigation VUE-ルータdocsで説明：私たちは実際に新しいルートにナビゲートする前にデータをフェッチこのアプローチで

。私たちは、着信コンポーネントでbeforeRouteEnterガードで取り出したデータを実行し、そして唯一のフェッチが完了したとき、次呼び出すことができます。勤務

export default { 
    data() { 
    return { 
     product: {}, 
     error: null 
    } 
    }, 
    beforeRouteEnter (to, from, next) { 
    getProduct(to.params.id, (err, product) => { 
     if (err) { 
     // display some global error message 
     next(false) 
     } else { 
     next(vm => { 
      vm.product = product 
     }) 
     } 
    }) 
    }, 
    // when route changes and this component is already rendered, 
    // the logic will be slightly different. 
    watch: { 
    $route() { 
     this.product = {} 
     getProduct(this.$route.params.id, (err, product) => { 
     if (err) { 
      this.error = err.toString() 
     } else { 
      this.product = product 
     } 
     }) 
    } 
    } 
}