Vue.js 使用具有不同路线但具有不同道具的同一视图组件

我有一个视图组件，ViewDeal，我想在不同的routes/housedeal/1和/cardeal/1中重用它

我正在使用Vue路由器，它工作得很好，只是我必须知道视图组件中使用了什么路由

这是我的组成部分：

const ViewDeal = {
  props: ['id'],
  template: '<div>Is this a car deal view or a house deal view? What route was used?</div>'
}

我在Vue路由器中读到过，这意味着我可以在housedeal路由中添加一个道具，例如{isHousedeal:true}，但是：id参数不会传入

没有任何将url道具与对象道具相结合的答案

这应该有效：

const router = new VueRouter({
  routes: [
    { path: '/housedeal/:id', component: ViewDeal, props: {isHousedeal: true} },
    { path: '/cardeal/:id', component: ViewDeal, props: {isHousedeal: false} },
  ]
})

然后，要检索id，可以在组件中使用{{$route.params.id}}

const ViewDeal = {
  props: ['isHousedeal'],
  template: '<div>Is this house deal? {{isHousedeal}}. ID : {{$route.params.id}}</div>'
}

---

最好创建命名路由并选中此项。$route.name然后在routes.js中添加其他不必要的参数

const ViewDeal = {
  props: ['isHousedeal'],
  template: '<div>Is this house deal? {{isHousedeal}}. ID : {{$route.params.id}}</div>'
}