vue路由模板是html,如何将所有Vue.js路由、模板和组件组合到一个文件中?

我正在尝试编写一个Vue.js示例,将所有内容合并到一个文件中。基本上,我是想证明一个小筒仓的效率,它服务于多条路线。这就是我目前为止所拥有的:

Index2

Hello App!

Go to Foo

Categories

const Foo = { template: '#foo' }

const Categories = {

template: '#Categories',

data: {

categories: [{ title: "blah" }, {title:"yack"}]

},

methods: {

saveNew: function(event) {

alert("boo!");

}

}

}

const routes = [

{ path: '/foo', component: Foo },

{ path: '/Categories', component: Categories }

];

const router = new VueRouter({

routes: routes,

mode: 'history',

base: '/forums/admin/index2/'

});

const app = new Vue({

router

}).$mount('#app');

Vue.config.devtools = true;

foo

• {{category.title}}

{{category.title}}

问题是:Categories组件中的数据没有绑定到模板,我在模板中尝试了UL和表。更奇怪的是,如果我将ul移动到模板中的第一个东西,它就会断开。但是,加载表单上的按钮处理程序可以工作。

我觉得我把模板声明搞错了,但我不知道怎么做。