レンダリングテンプレート付きVueルータ

Question

私は初心者ですvue jsです。私はvueルーターをページ内のナビゲーションに試しました。すべてがスムーズかつ簡単に行った。しかし、ナビゲーションにページが対応するページを表示する必要があるとき、私は問題があります。実際には、ファイルを分割してスクリプトをきちんと整理してほしい。

Route.jsこの場合

/* Configuration Routing */ 

//const Home = { template: 'templates/home.html' }; 
const Thread = { template: '<div>THREAD</div>' }; 
const Tag = { template: '<div>TAG</div>' }; 
const TrendingTag = { template: '<div>TRENDING TAG</div>' }; 
const Category = { template: '<div>CATEGORY</div>' }; 
const User = { template: '<div>USER</div>' }; 

const Home = Vue.component('home', function(resolve) { 
    $.get('templates/home.html').done(function(template) { 
     resolve({ 
     template: template, 
     data: function() { 
       return { 
        message: 'Welcome' 
       }; 
      } 
     }); 
    }); }); 

//const Home = Vue.component('home', require('assets/js/controllers/home.js')); 

const routes = [ 
         { path: '/', component: Home }, 
         { path: '/thread', component: Thread }, 
         { path: '/tag', component: Tag }, 
         { path: '/trending-tag', component: TrendingTag }, 
         { path: '/category', component: Category }, 
         { path: '/user', component: User } 
        ]; 

const router = new VueRouter({ mode: 'history', routes }); 

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

、実際constの家は別のファイルに存在している必要がありますなど、自身.HTML、自分自身を応援ので、これは私のスクリプトです。 like home.js私はのhome.jsにデータを作成しなければならないからです。

Home.js

Vue.component('homepage', function(resolve) { 
    $.get('templates/home.html').done(function(template) { 
     resolve({ 
     template: template, 
     data: function() { 
       return { 
        message: 'Welcome' 
       }; 
       } 
     }); 
    }); 
}); 

home.html

<div id="homepage"> 
    <template id="home"> 
     <h3 class="page-title" id="content"> {{ message }} </h3> 
    </template> 
</div> 

あなたは私を助けてくださいことはできますか？私は本当にこの事件に固執した。ありがとうございました。

Answer 1

Home.jsは次のようになります。

const Home = Vue.component('home', function(resolve) { 
    $.get('templates/home.html').done(function(template) { 
     resolve({ 
      template: template, 
      data: function() { 
       return { 
        message: 'Welcome' 
       } 
      } 
     }) 
    }) 
}) 


export default { 
    Home: Home 
} 

Route.jsにインポートします。

const Home = require('./Home.js').Home