VueJS: eine Komponente für viele Routen

Question

Ich bin ein Neuling in der Welt von VueJS.

Meine App verwendet vue-router, um mit Routenänderungen umzugehen. Dies ist, wie es konfiguriert ist:

new Router({ 
    routes: [{ 
    path: "/", 
    component: Articles 
    }, { 
    path: "/articles/:category", 
    component: Articles 
    }] 
}); 

Wie Sie sehen können, habe ich 2 Routen von der gleichen Komponente behandelt. Die Idee ist sehr einfach. Zeigen Sie auf einer Startseite Artikel aus einer beliebigen Kategorie an. Zeigen Sie auf einer Kategorieseite Artikel aus dieser Kategorie an.

Die Frage ist, wie eine Komponente erkennen kann, ob sich die Route geändert hat, z. B. von der Startseite zur Kategorieseite?

Ich habe mit dieser Lösung kommen:

function loadArticles() {}; 

Vue.component("Articles", { 
    mounted: loadArticles, 
    watch: { "$route": loadArticles } 
}); 

Aber ich denke, das ist eine schlechte Lösung.

Answer 1

Hier ist, was ich auf ein kleines Projekt von mir getan haben, ich bin mit der Vorlage einzigen Artikel

Das ist mein Router

'/post/:id': { 
    name: 'post', 
    component: require('./components/article.vue') 
}, 

In meiner .vue Datei anzuzeigen, erhalte ich die $route.params um die id des Artikels zu bekommen, dann zeigte es in meiner ready Funktion.

$.get('api/posts/' + this.$route.params.id, function(data){ 
      myPost.current = data; 
     }) 

Sie benötigen dann die category Parameter erhalten gerendert die Vorlage nach ihm.

Answer 2

Es sollte wie folgt aussehen:

watch: { 
    '$route' (to, from) { 
     if (this.$route.params.category) { 
      this.loadArticles(category); 
     } else { 
      this.loadArticles(); 
     } 
    } 
} 

'watch' wird here, in docs empfohlen.