Question

我有一个视图组件ViewDeal，我想将其重用于不同的路由/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路由器中，我有这个：

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

我在Vue Router中了解了Object mode，这意味着我可以在房屋交易路线中添加道具。 {isHousedeal: true}，但不会传入:id参数。

This thread没有任何将URL道具与对象道具组合的答案。

Answer 1

这应该有效：

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>'
}

使用相同的视图组件使用不同的路线，但使用不同的道具

1 个答案: