どのように私は現在、私のWebアプリケーションがindex.htmlの中に次のようにロードされている別のHTMLページ

にロードするために私VUEインスタンスのいずれかを使用することができます -どのように私は現在、私のWebアプリケーションがindex.htmlの中に次のようにロードされている別の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>

とのID

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

- 'アプリは' 私の主なVUEインスタンス（下記参照）でありますこれらの両方のVUEのインスタンスは、私のmain.jsに位置している

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のインスタンスを保持する第二のHTMLページ（live.html）を持ってしようとしています - しかし、 'App'インスタンスだけがロードされています。私は自分のURLを 'localhost：8080/live.html'に変更しますが、何も表示されません。

index.htmlにid = "outer"を移動すると、ロードされますが、別のHTMLファイルにロードしてコンポーネントを個別に表示することができますが、 SPAの残りの部分でvuexを使用して通信します。

正しい方向の指針があれば幸いです。明確化が必要な場合は、お尋ねください。

出典

2017-12-21 Paddy

は、ここで私は念頭に置いていたものです：

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

      ] 
     }, 
    ] 
})

あなたのメニューやナビゲーションは、「メイン」のコンポーネント

出典

2017-12-21 19:03:05 Jeff

範囲内であろう。その私がこのプロジェクトでてきたので、しばらくして。答えてくれてありがとうJeff。私はこれを試しましたが、それは別のページにナビゲーションバーを保持し、メインページにそれを複製するようです。メニューを分割してどこに配置すればいいですか - - 現在私のApp.vueにありますか？ – Paddy

どのように私は現在、私のWebアプリケーションがindex.htmlの中に次のようにロードされている別のHTMLページ

答えて

関連する問題