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