Как иметь несколько экземпляров одного компонента Vue JS с vue-router? - PullRequest
Новая
       11

Как иметь несколько экземпляров одного компонента Vue JS с vue-router?

0 голосов
/ 06 сентября 2018

У меня есть компонент Vue, который создается несколько раз на странице с разными данными в каждом экземпляре. Я хочу, чтобы маршруты для этих компонентов действовали независимо друг от друга, при этом нажатие кнопки в одном из экземпляров переместит в следующее представление только для этого экземпляра. Однако это не так, и нажатие кнопки меняет представление во всех экземплярах компонента. Есть ли какая-то конфигурация, которую я могу использовать для достижения этой цели?

Эта init функция вызывается на странице несколько раз, с другим идентификатором и другим видеообъектом. 

export function init(id, video, hotElementId) {
  const element = `#${hotElementId}`

  new Vue({
    el: element,
    store,
    router,
    data: () => {
      return {
        id: id
      }
    },
    template: '<MonetizationGate/>',
    components: { MonetizationGate },
    beforeMount: function () {
      // set the video object in the store
      store.commit({
        type: 'setVideoObject',
        video: video,
        id: id
      })
    },
    render: h => h(MonetizationGate)
  })
}

Мои настройки маршрутизации: 

const routes = [
  {
    path: '/',
    component: Gate,
    children: [
      {
        path: '/',
        component: Subscribe
      },
      {
        path: '/sign_in',
        component: SignIn
      }
    ]
  }
]

const router = new VueRouter({
  routes: routes
})
...