如何从父路线访问儿童路线中的数据？

Question

我有2路分量：

1）人的产品列表组件 2）产品的细节成分

列表显示产品，然后有一个路由器连接在使用的历史，产品路由器定义/范围。

我想要实现的是从父列表路径中获取数据到子详细信息产品模板中。

到目前为止它没有工作，我想知道出了什么问题。这里是我的代码：

Vue.use(VueResource); 
Vue.use(VueRouter); 
Vue.config.devtools = true; 


// const Home = { template: '<div>home</div>' } 
const PeopleListing = ('people-listing', { 
    template: '#people-listing-template', 
    delimiters: ['${', '}'], 
    data: function() { 
     return { 
      products: [] 
     } 
    }, 
    mounted: function() { 
     this.getAllProducts(); 
    }, 

    methods: { 
     getAllProducts: function(){ 

      this.$http.get('/collections/homepage/products.json').then(function (response) { 

       $.each(response.data.products, function(key, value) { 
        var product = value; 
        this.products.push(product); 
       }.bind(this)); 


      }.bind(this), function (response) { 

       console.log('error getting beers from the pivot table'); 

      }); 

     } 
    }, 

    props: ['people-listing'] 

}); 

const ProductDetail = ('product-detail', { 
    template: '#product-detail-template', 
    delimiters: ['${', '}'], 
    data: function() { 

     var filtered = this.$parent.data.products.filter(function(item) { 
      return (item.handle == parent.handle) ? item : false; 
     }); 

     return { 
      product: filtered[0] 
     } 

    }, 

    props: ['product'] 

}); 


const router = new VueRouter({ 
    mode: 'history', 
    routes: [ 
     {path: '/', component: PeopleListing}, 
     {name: 'product', path: '/products/:handle', component: ProductDetail } 
    ] 
}); 


new Vue({ 
    router, 
    el: "#home-container", 
    delimiters: ['${', '}'], 
    methods: { 

     // Load nav in case we need to preload it later 
     // on for speed 

     prerenderLink: function(e) { 
      var head = document.getElementsByTagName("head")[0]; 
      var refs = head.childNodes; 
      ref = refs[ refs.length - 1]; 

      var elements = head.getElementsByTagName("link"); 
      Array.prototype.forEach.call(elements, function(el, i) { 
       if (("rel" in el) && (el.rel === "prerender")) 
        el.parentNode.removeChild(el); 
      }); 

      var prerenderTag = document.createElement("link"); 
      prerenderTag.rel = "prerender"; 
      prerenderTag.href = e.currentTarget.href; 
      ref.parentNode.insertBefore(prerenderTag, ref); 
     }, 

    } 

}); 

然后在模板我有这样的：

<section id="home-container" class="parralex-scroll"> 
    <div class="wrapper"> 
    <div class="grid"> 
     <template id="people-listing-template"> 
     <div class="wrapper grid" id="start-parralex"> 

      <div class="grid__item large--one-third medium--one-whole no-padding" v-for="product in products" v-cloak> 

       <router-link :to="{ name: 'product', params: { handle: product.handle }}"> 

        <div class="inner-container relative"> 

        <div class="pad-normal absolute top-0 left-0 large--one-whole"> 
         <p class="lyon-text"> 
         ${ product.title }, <span>£${ product.variants[0].price }</span> 
         </p> 
         <p class="univers uppercase smaller body-size"> 
         Buy now 
         </p> 
        </div> 

        <div v-for="image in product.images"> 
         <img class="scale-with-grid archives-image" v-bind:src="image.src" v-bind:alt="image.id"> 
        </div> 

        </div> 

       </router-link> 

      </div> 

      <router-view></router-view> 
     </div> 
     </template> 

     <template id="product-detail-template"> 
     <div> 
     <h1>{{ $route }}</h1> 
     </div> 
     </template> 
    </div> 
    </div> 
</section> 

而且这里是数据API，我在下面打一个想法：

{ 
"products": [ 
{ 
"id": 8494684881, 
"title": "Long Shirt Dress (Gargrave)", 
"handle": "copy-of-long-shirt-dress-tudor", 
"body_html": "", 
"published_at": "2017-01-19T22:24:00-11:00", 
"created_at": "2017-01-19T23:25:58-11:00", 
"updated_at": "2017-01-19T23:38:05-11:00", 
"vendor": "in-grid", 
"product_type": "Shirt Dress", 
"tags": [], 
"variants": [], 
"images": [], 
"options": [] 
}, 

是否可以将父数据放入子路径中以获取该产品的详细信息？

Answer 1

Vuex是你的答案。 您需要在商店中存储数据以真正正确地在组件之间共享数据。

只需按照Vuex文档：https://vuex.vuejs.org/en/intro.html

初始化您的商店，创造必要的行动/突变 并让你的孩子组件的数据，你只需要使用：

computed() { 
someData: { 
return this.$store.states.someDataFromParaent 
} 
}