VueJS：多くのルートの1つのコンポーネント

Question

私はVueJSの世界への初心者です。

私のアプリはvue-routerを使用して経路の変更を処理します。これは設定方法です：

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

ご覧のとおり、同じコンポーネントで2つのルートが処理されています。アイデアはとてもシンプルです。ホームページを開いているときは、どのカテゴリの記事を表示します。カテゴリページにいるときは、そのカテゴリの記事を表示します。

質問は、コンポーネントがルートが変更されたかどうかを、たとえばホームページからカテゴリページに変更する方法ですか？

私は、このソリューションが付属していました：

function loadArticles() {}; 

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

しかし、私は、それが悪い解決策だと思います。ここで

Answer 1

が、私は私の小さなプロジェクトでやっていることだ、私は単一の記事を表示する

をテンプレートを使用していますこれは私が$route.paramsを取得し、私の.vueファイルで

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

私のルータです記事のidを取得するために私のready機能でそれを表示しました。

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

categoryパラメータを取得し、それに従ってテンプレートをレンダリングする必要があります。

Answer 2

それは次のようになります。

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

'時計' をhere, in docsをお勧めします。