如何使用我的 vue 实例之一加载到单独的 html 页面中答案

【问题标题】：How can I use one of my vue instances to be loaded in a separate html page如何使用我的 vue 实例之一加载到单独的 html 页面中
【发布时间】：2017-12-21 16:59:54
【问题描述】：

目前我的 Web 应用程序在 index.html 中是这样加载的 -

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>tempo</title>
    <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

'app' 的 ID 是我的主要 vue 实例（见下文）-

var spa = new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App },
})

我正在尝试创建第二个 html 页面 (live.html) 来保存 -

的 vue 实例

var outer = new Vue({
  el: '#outer',
  router,
  store,
  template: '<Live/>',
  components: { Live },
})

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>tempo</title>
  <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">
</head>
<body>
<div id="outer"></div>
</body>
</html>

这两个 vue 实例都位于我的 main.js 中 - 但只有“App”实例正在加载，我将我的 url 更改为 'localhost:8080/live.html' 没有出现。

如果我将 id="outer" 移动到我的 index.html 它将加载，但我的目标是让它加载到单独的 html 文件中，以便其组件可以单独显示，但可能能够通信对 SPA 的其余部分使用 vuex。

非常感谢任何正确方向的指针，如果需要任何澄清，请询问。

【问题讨论】：

标签： vue.js vuejs2 vue-router

【解决方案1】：

这是我的想法：

const router = new VueRouter({
    routes: [
        { 
            path: '/livedisplay', 
            component: Live 
        },
        { 
            path: '/', 
            component: Main,
            children: [
                { 
                    path: '/', 
                    component: Home
                },
                { 
                    path: '/about', 
                    component: About
                },

            ] 
        },
    ]
})

您的菜单和导航将位于“主要”组件中

【讨论】：

我已经有一段时间没有参与这个项目了。再次感谢杰夫的回答。我已经尝试过了，但它似乎将导航栏保留在单独的页面中并在主页中复制它。如果我将菜单分开，我将在哪里放置 - - 目前在我的 App.vue 中？