Vue应用程序可以嵌套吗?

and*_*dig 5 vue.js vue-router vue-component vuejs2

我有一个单体 SPA,我正在尝试对其进行模块化。第一步是分解成单独的 vue 应用程序。现在我想介绍Vue路由器,因此需要使用Vue组件。我的主要组件仍然只不过是两个 Vue 应用程序的包装器。

是否可以将 Vue 应用程序嵌套在组件中,或者我是否需要将这些应用程序转换为组件,即使它们实际上是单例且不打算多用途?

所以基本上,子应用程序 N 是与app主应用程序类似的 Vue 应用程序,是否可能出现这样的情况:

<div id="app">
    <nav>
        <router-link to="/">Main</router-link>
        <router-link to="/settings">Settings</router-link>
    </nav>
    <router-view></router-view>
</div>

<script type="text/x-template" id="main-template">
<div>
    <div id="sub-app-1"></div>
    <div id="sub-app-2"></div>
</div>
</script>

<script>
const routes = [
    { path: "/", component: main },
    { path: "/settings", component: settings },
];

const router = new VueRouter({
    routes // short for `routes: routes`
});

const app = new Vue({
    router
}).$mount('#app');

const subapp1 = new Vue({
  el: '#sub-app-1',
  ...
});

const subapp2 = new Vue({
  el: '#sub-app-2',
  ...
});
</script>
Run Code Online (Sandbox Code Playgroud)