Vue Router mit Render-Vorlage

Question

Ich bin ein Anfänger verwendet Vue Js. Ich versuchte Vue-Router Navigation auf meiner Seite. Alles lief reibungslos und einfach. Aber ich habe ein Problem, wenn Navigation Vorlage benötigt, um Seite entsprechend anzuzeigen. Eigentlich möchte ich, dass mein Skript ordentlich organisiert wird, indem ich die Datei aufspalte. Wie sich Verwurzelung, .html selbst, etc. Dies ist mein Skript:

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

In diesem Fall tatsächlich const Hause muss in einer anderen Datei vorhanden sind. Wie home.js. Weil ich Daten in home.js erstellen muss.

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> 

Können Sie mir bitte helfen? Ich bin wirklich bei diesem Fall geblieben. Vielen Dank.

Answer 1

Ihr Home.js sollte in etwa so aussehen.

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 
} 

Importieren Sie es in Ihre Route.js.

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