Несколько Vue приложений с маршрутизацией на одной странице - PullRequest
Новая
       4

Несколько Vue приложений с маршрутизацией на одной странице

0 голосов
/ 14 апреля 2020

Я пытаюсь воспроизвести следующее поведение:

project

VueJS Приложение 1 и VueJS Приложение 2 - это целые VueJS приложения с маршрутизация и хранение.

Я хотел бы иметь возможность развертывать их как автономные (доступные на маршрутах / my-route1 и / my-route2), а также как экземпляры на другой странице (/my-route3).

Идея состоит в том, что я могу создать столько экземпляров своих приложений Vue, сколько захочу. Маршрутизация и хранилища должны быть независимыми между приложениями.

Я уже смог заставить его работать через iframes, но я хотел бы найти лучший способ сделать это.

Текущая проблема Я сталкиваюсь с тем, что все эти экземпляры совместно используют один и тот же root Vue экземпляр, возможно ли создать собственный локальный Vue при их создании? Как я хотел бы иметь возможность использовать глобальные компоненты, но они должны быть глобальными только для приложения, в котором они созданы.

Заранее благодарю за помощь!

1 Ответ

0 голосов
/ 17 апреля 2020

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

Предполагая, что у вас есть доступ к отдельному источнику приложений, и вы действительно управляете им, я бы преобразовал их в компоненты, которые, я думаю, могут быть менее проблемными c, учитывая, что вы будете иметь все виды проблем с версионностью кэша (хэширование имени файла) и разбиением кода в отношении получения всех ресурсов, необходимых для правильной загрузки, это будет кошмар.

Отдельные приложения действительно должны были быть созданы как всеобъемлющие Dynami c компоненты с их исходным кодом каждый в своем собственном подкаталоге.

При использовании динамического c импорта с разделением кода части ваших сложных приложений будут автоматически загружаться и загружаться по мере необходимости .

В качестве компонентов плитки могли быть легко выводите только по желанию, используя итератор для вывода желаемого содержимого тайла, используя <component :is="myView"/>. 

// Register app components:

const Dynamics = {

  // A component to use while the async component is loading
  loading: LoadingComponent,

  // A component to use if the load fails
  error: ErrorComponent,

  // Delay before showing the loading component. Default: 200ms.
  delay: 200,

  // The error component will be displayed if a timeout is
  // provided and exceeded. Default: Infinity.
  timeout: 3000

}

Vue.component('application-one', () => ({ ...Dynamics, component: import('@/components/applications/app-one/app.vue') }))

Vue.component('application-two', () => ({ ...Dynamics, component: import('@/components/applications/app-two/app.vue') }))


// Dashboard.vue

<template>

 <div id="dashboard">

   <template v-for="(app, index) of applications">

     <component :is="app.name" :key="index" v-bind="app" />

   </template>

 </div>

</template>

<script>

  export default {

    name: 'dashboard',

    // example only, real list would be generated from an API endpoint call?
    data: () => ({

      applications: [
        { name: 'application-one', width: '33%', height: '100%' },
        { name: 'application-two', width: '33%', height: '100%' },
        { name: 'application-one', width: '33%', height: '33%' },
        { name: 'application-one', width: '33%', height: '33%' },
        { name: 'application-two', width: '33%', height: '33%' },
      ]

    })

  }

</script>

Надеюсь, это даст вам основу для некоторых альтернативных подходов.

...