Vue Router with Render Template

Question

I'm a beginner used vue js . I tried vue router to navigation in my page. Everything went smoothly and easily. But I have a problem, when navigation need template to show page corresponding. Actually, I want my script neatly organized by splitting the file. Such as rooting itself , .html itself, etc. This is my script :

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 this case, actually const home must exist in another file. Like home.js . Because I have to create data in 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>

Can you help me please ? I really stuck with this case. Thank you.

Answer 1

Your Home.js should look something like this.

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
}

Import it into your Route.js .

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