Klicken Sie auf den Link ändert sich die URL, aber nicht den Inhalt/Daten auf Seite

Question

die Geschichte:

ich auf der Produktseite am #/product/7 und auf der gleichen Seite Ich habe 4 weitere Produkte, die auf der einen ähnlich sind, die ist angesehen werden. Alle diese Produkte haben Links zu ihren Seiten:

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

das Problem:

Wenn ich auf einem der Produkt-Links klicken, die Änderungen url aber der Inhalt gleich bleibt. Also, wenn ich auf #/product/7 bin und auf #/product/8 klicke, ändert sich die URL nur. Wenn ich von der Seite /product/:id navigiere und auf ein Produkt klicke, komme ich auf die richtige Seite mit dem richtigen Inhalt.

Wie Sie auf den Screenshot, ist aktuelle Produkt-ID sehen 15, aber der Inhalt ist die von der ID 7, wie in url am Boden gezeigt, während ich über das Sleek Silk Hemd Produkt schwebte im Wagen. Irgendwelche Ideen, wie das zu beheben?

Answer 1

Sie müssen die Daten der Produktvariablen aktualisieren, wenn Sie die Route ändern, da vue die Seite neu lädt und in Ihrem Fall nicht neu lädt, wenn Sie sich auf derselben Route befinden.

Sie können den Ansatz anpassen: Fetching Before Navigation in vue-Router docs beschrieben:

Mit diesem Ansatz wir die Daten holen, bevor sie tatsächlich auf die neue Route navigiert wird. Wir können die Daten durchführen in der beforeRouteEnter Wache in der eingehenden Komponente zu holen, und erst im nächsten rufen, wenn der Abruf abgeschlossen ist:

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 
     } 
     }) 
    } 
    } 
}