vuejs+webpack+vue-router+vue-resource如何实现：侧边栏选择分类后显示分类详情及部分产品，

Question

vuejs+vue-router+vue-resource如何实现：侧边栏选择分类后显示分类详情及部分产品列表，点击分类详情里的【全部】在主页面显示全部产品列表。因为接口url是要通过选择的分类来组装的，要怎么设计组件，及数据传递

现在只在list的组件里这样写（还未实现侧边栏），提示错误

<template>
    <li v-for="product in productList" v-bind:style="{background: 'url(' + product.image + ') no-repeat center center; background-size:cover'}">
        <a href="/detail">
            <div class="goods">
                <h3 class="title fl" v-text="product.name"></h3>
                <p class="price fr">租金：{{product.price}}元/天起</p>
            </div>
        </a>
    </li>
</template>
<script>
    export default{
        props:{
            catID:''//需要的分类id
        },
        data(){
            return{
                productList:[],
                productListUrl:root+'/Api/getProListByCat?catID='+this.catID
            }
        },
        mounted:function () {
            var that = this;
            that.$http.get(that.productListUrl)
                    .then(function(response) {
                        var rtnData = response.data[0];
                        if(rtnData.code==200){
//                            that.$set('sortList', rtnData.data)
                            that.productList = rtnData.data;
                            console.log(that.productList);
                        }
            }, function(error) {
                //error
                 console.log(error);
            })
        }
    }
</script>