vue 实例与子 vue 实例可能或替代方法？

Question

我想为 4K 显示器开发一个 vuejs 多点触控应用。背景上大约有 3-4 张卡片，实际上显示的是相同的内容。对于每张卡片，都可以看到不同的入口页面。

是否可以在 Vue 实例中的 div 中打包多个其他 vuejs 实例（内容相同）？

不知何故，我想多次将实例与商店和路由器集成，但我想不通。

如果有人可以在这里帮助我会很有帮助，也许可以提供链接或方法。

我正在寻找一种方法，我可以同时显示相同的内容 3 次，最好是使用路线和嵌套路线。每个用户都可以单独导航，每个人都可以通过 GUI 拥有自己的历史记录。

当我尝试在主 vue 实例 3 个不同的路由器中使用 2 个实例时，它总是渲染主路由的内容。

我发现了这个实例并排的例子，效果很好：https://jsfiddle.net/m91e7s2v/ 但不在父实例内？为什么？

在 app.vue 中

<div id="app">
 <VueToolMultitouch class="schatten" :startX="100" :startY="100" :startColor='"#00FF00"'  id="id1" :idName="'id1'" :startZ="2">
          
<div id="subapp1">
  <router-link to="/">/home</router-link>
  <router-link to="/foo">/foo</router-link>
  <p>Route path: {{ $route.path }}</p>
  <router-view></router-view>
</div>
<h2>Passing Text 1</h2>

</VueToolMultitouch> 


<VueToolMultitouch class="schatten" :startX="200" :startY="600" :startColor='"#FF0000"'  id="id2" :idName="'id2'" :startZ="3"> 
  
    <div id="subapp2">
        <router-link to="/">/home</router-link>
        <router-link to="/foo">/foo</router-link>
        <p>Route path: {{ $route.path }}</p>
        <router-view></router-view>
    </div>
    <h2>Passing Text 2</h2>

</VueToolMultitouch> 

</div>

在 main.js 中

import router1 from "./router/router";
import router1 from "./router/router-1";
import router2 from "./router/router-2";


new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

new Vue({
   router: router1,
}).$mount("#subapp1");

new Vue({
   router: router2,
}).$mount("#subapp2");

另一种方法是，如果一切都使用单个 vue 实例实现，但每张卡都有自己的“路由器”。

也许有人知道那会是什么样子。

Answer 1

这似乎可以通过使用组件的层次结构来实现。如果您确定需要不同的 Vue 应用程序实例，那么值得使用 Vue 3，因为它放弃了 shared global config 的想法，允许您使用 createApp 创建许多 Vue 实例。都有不同的配置。

你可以这样做 (JS Fiddle here)：

Vue.createApp({
    name: 'App',
    template: `
        <h1>Primary App</h1>

        <div id="subAppOne"></div>
        <div id="subAppTwo"></div>
        <div id="subAppThree"></div>
    `
}).mount('#app');

Vue.createApp({
    name: 'AppOne',
    template: `<h2>App One</h2>`,
}).mount('#subAppOne');

Vue.createApp({
    name: 'AppTwo',
    template: `<h2>App Two</h2>`,
}).mount('#subAppTwo');

Vue.createApp({
    name: 'App Three',
    template: `<h2>App Three</h2>`,
}).mount('#subAppThree');

您可以在每个应用实例上使用.use() 指定不同的路由器，就在调用mount() 之前。

const routerOne = VueRouter.createRouter({
    history: VueRouter.createWebHistory(),
    routes: [/* … */],
});

Vue.createApp({/* … */}).use(routerOne).mount('#appOne');

Answer 2

问题是每个孩子都绑定到父 vue 应用程序及其原型，这会覆盖孩子的路由器。我认为您需要为子级使用 iframe，或者让父级应用程序处理子级视图的状态。

编辑：

我刚刚了解了v-pre，该指令防止 Vue “编译” HTML 节点及其子节点。 只要您将v-pre 放在用于挂载子 Vue 应用程序的标签上，您基本上可以拥有尽可能多的 Vue 实例，即使它们是嵌套的。 这是一个工作小提琴https://jsfiddle.net/dja36s7x/18/

Answer 3

我在 VueJS 论坛中找到了另一种方法。

<div id="app">
  <div class="row">
    <my-child1></my-child1>
    <my-child2></my-child2>
  </div>
  <div class="row">
    <my-child3></my-child3>
    <my-child4></my-child4>
  </div>
</div>

const routes = [
  {
    path: '/page1',
    component: { template: '<p>Page 1</p>' }
  }, {
    path: '/page2',
    component: { template: '<p>Page 2</p>' }
  }, {
    path: '/page3',
    component: { template: '<p>Page 3</p>' }
    }
]

const MyChild = {
  template: `
    <div>
      <router-link to="/page1">Page 1</router-link>
      <router-link to="/page2">Page 2</router-link>
      <router-link to="/page3">Page 3</router-link>
      <button @click="$router.back()">Back</button>
      <div>{{ $route.path }}</div>
      <router-view />
    </div>
  `
}

function getChild() {
    return {
    extends: MyChild,
    router: new VueRouter({
      mode: 'abstract',
      routes
    })
  }
}

new Vue({
  components: {
    MyChild1: getChild(),
    MyChild2: getChild(),
    MyChild3: getChild(),
    MyChild4: getChild()
  }
}).$mount('#app')

JSFiddle Example

在这里，组件使用自己的路由器进行扩展。

我目前不再需要通过嵌套实例的路由。但我会在每个人身上测试 v-pre。