带有子vue实例的vue实例是可行的还是替代方法？

问题描述

我想为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实例实现，但是每张卡都有自己的“路由器”。

也许有人对它的外观有所了解。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

multi-touch vue.js vuejs3