Question

我是初学者，使用 vue js 。我在页面中尝试了 vue router 导航。一切顺利，轻松。但是我有一个问题，当导航需要模板显示相应的页面时。实际上，我希望通过拆分文件整齐地组织我的脚本。比如rooting本身，.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

带渲染模板的Vue路由器

1 个答案: