带渲染模板的Vue路由器

Question

我是使用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');

在这种情况下，实际上const home必须存在于另一个文件中。 就像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