Vue.js 为什么异步组件不'；当路线更新时，是否更改？

我正在使用中（如下所示）。当我在

转到产品-1

之后单击

转到产品-2

时，什么也没有发生。我希望

组件会根据单击的组件进行更改，但只有URL会更改。我甚至有一个

beforeUpdate

hook函数。我该如何解决这个问题

//main.js
从“Vue”导入Vue；
从“/App.vue”导入应用程序；
从“vue路由器”导入VueRouter；
从“./product page.vue”导入ProductPage；
Vue.use（VueRouter）；
Vue.config.productionTip=false；
常数路由=[
{路径：'/:productId'，组件：ProductPage}，
]
常量路由器=新的VueRouter({
routes//“routes:routes”的缩写`
})
新Vue({
路由器，
渲染：h=>h（应用程序）
}).$mount（“#app”）；

//App.vue
转到产品1




转到产品2
路由器视图：

//product-page.vue
导出默认值{
名称：“产品页面”，
组成部分：{
ProductItem:（）=>({
组件：导入（“./product item.vue”），
正在加载：{模板：“正在加载…”
})
}
};

产品项：{{product}}
导出默认值{
名称：“ProductItem”，
挂载：函数（）{
this.product=this.$route.params.productId；
},
beforeRouteUpdate:函数（到、从、下一个）{
this.product=to.params.productId；
next（）；
},
数据：函数（）{
返回{
产品：空
}
},
};

问题在于路由路径（即，

/：productId

）在

/product-1

和

/product-2

的链接之间实际上没有改变（即使参数值改变），因此

路由器视图

不会重新呈现

解决方法是根据

productId

参数设置

键

路由器视图：