Question

我有两个路线组件：

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

初始化您的商店，创建必要的操作/突变要获取子组件中的数据，您只需使用：

{{1}}

如何从父路由访问子路由中的数据？

1 个答案: