Vue路由器與渲染模板

Question

我是一個初學者使用vue js。我試圖vue router導航到我的網頁。一切都順利而輕鬆。但是我有一個問題，導航時需要模板來顯示相應的頁面。實際上，我希望通過分割文件整齊地組織我的腳本。如生根本身的.html本身，等等，這是我的腳本：

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'); 

在這種情況下，實際上常量家必須存在於另一個文件。像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