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：許多路線的組成部分

回答

相關問題