VueJS：许多路线的组成部分

我的应用使用vue-router来处理路由更改。这就是它的配置：

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

正如你所看到的，我有两条路线由同一组件处理。这个想法很简单。当我们在主页上时，显示来自任何类别的文章。当我们在分类页面上时，显示来自该分类的文章。

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

我来到这个解决方案：

function loadArticles() {}; 

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

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

来源

2017-04-01 Th.Gleb

为什么要看$ route对象是一个坏主意？这是Vue路由器文档中推荐的方式，当您想在路由激活后获取数据时。 –

这就是我对我的一个小项目完成后，我使用模板来显示单篇文章

这是我的路由器

'/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参数，然后根据它提供的模板。

来源

2017-04-01 16:30:39 highFlyingDodo

它应该是这个样子：

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

'手表' 建议here, in docs。

来源

2017-04-01 21:13:24 wostex

VueJS：许多路线的组成部分

回答

相关问题