Vue.js路由器更改url但不更改视图

我在控制台中看到这个错误：

[Vue warn]：属性或方法“product”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保此属性在数据选项中或对于基于类的组件是被动的

我的模板id=“productDetail”未收到模板id=“product”的属性“product”，我不知道如何推送此内容，请查看我的cod

HTML列表 当我单击路由器链接时，url更改为：

/例如，product/iphone-x-64-gb。

{{index}}gebrauchte Roomba 651
{{product.price}}
米尔细部

HTML产品详细信息（不接收“产品”）

{{product.title}}
{{product.price}}
添加\u购物\u cartkopen
背箭

JS

var List = Vue.extend(
{
    template: '#product',
    data: function ()
    {
        return {products: [],};
    },
    created: function()
    {
        this.$http.get('https://api.myjson.com/bins/17528x').then(function(response) {
            this.products = response.body.products;
        }.bind(this));
    },

});

const Product =
{
    props: ['product_id'],
    template: '#productDetail'
}

var router = new VueRouter(
{
    routes: [
    {path: '/', component: List},
    {path: '/product/:product_id', component: Product, name: 'product'},
    ]
});


var app = new Vue(
{
    el: '#app',
    router: router,
    template: '<router-view></router-view>'
});

var List=Vue.extend(
{
模板：“#产品”，
数据：函数（）
{
返回{产品：[]，}；
},
已创建：函数（）
{
这是。$http.get（'https://api.myjson.com/bins/17528x，然后（函数（响应）{
this.products=response.body.products；
}.约束（这个）；
},
});
常数积=
{
道具：['product_id']，
模板：“#productDetail”
}
var路由器=新的VueRouter(
{
路线：[
{路径：'/'，组件：列表}，
{path:'/product/：product_id'，组件：product，名称：'product'}，
]
});
var app=新的Vue(
{
el:“#应用程序”，
路由器:路由器,，
模板：“”
});

---

谢谢你的帮助。

你的道具应该是

道具：['product']

而不是

道具：['product\u id']

---

第一:

var路由器=新的VueRouter({
...
路径：'/product/：product_id'，
组成部分：产品，
名称：'产品'，
props:true//Very nice是正确的，但是现在我需要定义{{product.title}mmmm的“title”…[Vue warn]：呈现中的错误：“TypeError:无法读取未定义的”Bind your
产品
的属性'title'，使用v-Bind:product=“product”关于子组件Tag，我可以尝试，但不理解这里…对不起，您想通过接受答案来结束问题吗？很好，很好，很好，非常好！谢谢
<template id="productDetail" functional>
<div class="row">
    <div class="col s12 m6">
        <img src="images/iphone-8-64-gb.jpg" alt="product.images" class="responsive-img"/>
    </div>
    <div class="col s12 m6">
        <h3>{{ product.title }}</h3>
        <h5>{{ product.price }}<h5>
        <div class="col s12 m6">
            <a class="waves-effect waves-light btn light-green darken-3"><i class="material-icons left">add_shopping_cart</i>kopen</a>
        </div>
        <div class="col s12 m6">
            <router-link class="btn btn-default light-green darken-3" :to="{path: '/'}">
                <span class="glyphicon glyphicon-plus"></span><i class="material-icons left">arrow_back</i>terug
            </router-link>
        </div>
    </div>
</div>

var List = Vue.extend(
{
    template: '#product',
    data: function ()
    {
        return {products: [],};
    },
    created: function()
    {
        this.$http.get('https://api.myjson.com/bins/17528x').then(function(response) {
            this.products = response.body.products;
        }.bind(this));
    },

});

const Product =
{
    props: ['product_id'],
    template: '#productDetail'
}

var router = new VueRouter(
{
    routes: [
    {path: '/', component: List},
    {path: '/product/:product_id', component: Product, name: 'product'},
    ]
});


var app = new Vue(
{
    el: '#app',
    router: router,
    template: '<router-view></router-view>'
});

<parent-component :product="product"></parent-component>

export default {
  name: 'child-component',
  props: ['product']
}

<router-link class="btn btn-default light-green darken-3" :to="{name: 'product', 
             params: {product_id: product.id, product: product}}">meer detail</router-link>
                                            ^^^^^^^^^^^^^^^^^^

const Product = {
  props: ['product_id', 'product'],         // <======= added 'product' here
  template: '#productDetail'
}