vue路由模板是html,Vue路由器与渲染模板

我是一个初学者使用vue js。我试图vue router导航到我的网页。一切都顺利而轻松。但是我有一个问题，导航时需要模板来显示相应的页面。实际上，我希望通过分割文件整齐地组织我的脚本。如生根本身的.html本身，等等，这是我的脚本：Vue路由器与渲染模板

Route.js

/* Configuration Routing */

//const Home = { template: 'templates/home.html' };

const Thread = { template: '

THREAD

' };

const Tag = { template: '

TAG

' };

const TrendingTag = { template: '

TRENDING TAG

' };

const Category = { template: '

CATEGORY

' };

const User = { template: '

USER

' };

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

在这种情况下，实际上常量家必须存在于另一个文件。像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的

{{ message }}

你能帮助我吗？我真的坚持这种情况。谢谢。

2017-07-18

userpr

+0

其中没有显示导航/页面？ –

+0

显示所有导航。我的意思是，从另一个文件中的const home移动值。 –