Wie kann ich einen meiner vue Instanzen verwenden, um in einer separaten HTML-Seite

Aktuelle Anwendung meiner Web geladen werden, wie dies in index.html geladen -Wie kann ich einen meiner vue Instanzen verwenden, um in einer separaten HTML-Seite

<!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>

und die ID 'App' ist mein Haupt-vue-Instanz (siehe unten) -

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

Ich versuche, eine zweite HTML-Seite (live.html) zu haben, die die vue Instanz halten wird -

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>

Beide vue Instanzen befinden sich in meinem main.js - Aber nur die "App" -Instanz wird geladen. Ich ändere meine URL in "localhost: 8080/live.html".

Wenn ich die ID = "äußere" zu meinem Index.html verschiebe, wird es geladen, aber mein Ziel ist es, laden Sie es auf eine separate HTML-Datei, so dass ihre Komponenten separat angezeigt werden können, können kommunizieren Sie mit vuex für den Rest des SPA.

Alle Zeiger in der richtigen Richtung wird sehr geschätzt und wenn eine Klärung erforderlich ist, fragen Sie bitte.

Quelle

2017-12-21 Paddy

Hier ist, was ich im Sinn hatte:

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

      ] 
     }, 
    ] 
})

Ihr Menü und Navigation innerhalb der „Main“ Komponente

Quelle

2017-12-21 19:03:05 Jeff

Es ist schon eine Weile wäre, da ich an diesem Projekt waren. Danke für die Antwort wieder Jeff. Ich habe es ausprobiert, aber es scheint die Navigationsleiste in der separaten Seite zu behalten und auf der Hauptseite zu duplizieren. Wenn ich das Menü trennen würde, wo würde ich die - - die derzeit in meiner App.vue ist? – Paddy

Wie kann ich einen meiner vue Instanzen verwenden, um in einer separaten HTML-Seite

Antwort

Verwandte Themen