帶渲染模板的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