我有一个用Vue.js构建的应用程序。在这个应用程序中，我使用Vue路由器。我成功地拥有顶级路线。但是，我无法让儿童路线上班。我的代码似乎忽略了路由的const CustomerMenu = { template: '<div><br />please choose: <router-link to="/customers/list">list</router-link> <router-link to="/customers/stats">stats</router-link></div>' }
const CustomerList = { template: '<div>A list of customers here</div>' };
const CustomerStats = { template: '<div>Customer statistics</div>' };
const Suppliers = { template: '<div>Suppliers</div>' }
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/customers', component: CustomerMenu, children: [
{ path: 'list', component: CustomerList },
{ path: 'stats', component: CustomerStats }
]},
{ path: '/suppliers', component: Suppliers }
]
})
new Vue({
router,
el: '#app',
data: {}
});
属性中定义的任何路由。我在此fiddle中设置了问题。相关代码如下所示：
children如何显示与路径的tank/test/exe属性中定义的路径关联的内容。换句话说，我如何获得＆＃34;列表＆＃34;或＆＃34;统计＆＃34;当用户选择相应的链接时显示的组件？
谢谢！
答案 0 :(得分：1)
您在CustomerMenu组件中缺少<router-view/>。
http://jsfiddle.net/sn5vu6ek/
请记住 - 每个包含children路线的组件都必须能够显示儿童组件。
如果您只想让组件之间的路径有一些共同点，您可以在里面创建只有<router-view/>的父路径，或者为多个组件指定完整路径。