Javascript 带渲染模板的Vue路由器

我是一个使用vue js的初学者。我尝试了vue路由器在我的页面中导航。一切都进行得很顺利。但我有一个问题，导航时需要显示相应的页面模板。实际上，我希望通过拆分文件来整齐地组织脚本。例如根目录本身、.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');

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>

{{message}}

---

你能帮我吗？我真的坚持这个案子。谢谢。

您的

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

未显示哪个导航/页面？显示所有导航。我的意思是，将值从const home移动到另一个文件中。我尝试了您的答案，但在控制台中显示错误：未捕获的语法错误：意外的令牌输出您正在使用webpack吗？不，webpack是什么？我如何使用它？