Question

我是VueJS世界的新手。

我的应用使用vue-router来处理路线变化。这是它的配置方式：

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

如您所见，我有两条路由由同一个组件处理。这个想法非常简单。当我们在主页上时，显示来自任何类别的文章。当我们在类别页面上时，显示该类别的文章。

问题是，组件如何检测路由是否发生了变化，例如，从主页到类别页面？

我已经找到了这个解决方案：

function loadArticles() {};

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

但我认为，这是一个糟糕的解决方案。

Answer 1

这是我在我的一个小项目上所做的，我使用模板显示单篇文章

这是我的路由器

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

在我的.vue文件中，我得到$route.params获取文章的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();
        }
    }
}

＆＃39;观看＆＃39;建议here, in docs。

VueJS：许多路线的一个组件

2 个答案: