通过 VueRouter 设置 VueComponent 属性答案

【问题标题】：set VueComponent properties via VueRouter通过 VueRouter 设置 VueComponent 属性
【发布时间】：2016-12-05 20:30:45
【问题描述】：

我可以通过 VueRouter 设置 VueComponent 的属性吗？

我有几条路线

{ path: '/user/:id/budgets', component: Budgets },
{ path: '/budgets', component: Budgets }

我们都是相同的组件，但会根据路线获得完全不同的记录集......

事情是动作是由一个属性控制的.....可以从路由中设置属性值吗？

 { path: '/user/:id/budgets', component: function(id){
return Vue.extend(Budgets, { props: { id: id } })
 } },

【问题讨论】：

【解决方案1】：

Vue-Router 允许您使用 this.$route 从每个组件中访问 Route 的所有当前属性，因此您无需设置属性，而是从组件对路由器的引用中获取它们。您应该能够通过执行以下操作从组件中获取您的 ID 参数：this.$route.params.id。

Vue-Router 文档的 Data Fetching 部分有一个很好的例子。

【讨论】：