路由器视图内容未呈现

Question

router-view我的应用程序的内容始终保持为空（<!---->），即使路由自身运行正常并且模板在整个应用程序中正确呈现。

（注意：即使只有一个import Vue from 'vue';，我正在使用具有编译支持的Vue.js独立版本。正确的导入已由webpack替换。）

主要

import Vue from 'vue';
import Router from './services/router';
import { AppComponent } from './components/';

export default new Vue({
  el: '#app-container',
  router: Router,
  render: (context) => context(AppComponent)
});

main.template.pug（节选）

body
  #app-container

app.ts（节选）

@Component({
  template: require('./app.template.pug'),
  components: {
    'app-header': HeaderComponent,
    ...
  }
})
export class AppComponent extends Vue {

}

app.template.pug

.app
  app-header
  .app-body
    app-sidebar
    main.app-content
      app-breadcrumb(:list='list')
      .container-fluid
        router-view
    app-aside
  app-footer

服务/路由器/index.ts（节选）

import Router from 'vue-router';
import { DashboardComponent } from '../../components/pages/dashboard';

Vue.use(Router);

export default new Router({
  mode: 'history',
  linkActiveClass: 'open active',
  routes: [
    {
      path: '/',
      redirect: '/dashboard',
      name: 'Home',
      children: [
        {
          path: 'dashboard',
          name: 'Dashboard',
          component: DashboardComponent
        }
      ]
    }
  ]
});

Answer 1

是的.. Home 路线没有组件......你可以简单地做：

routes: [
    {
      path: '/',
      redirect: '/dashboard',
      name: 'Home',
      component: {
          template: '<router-view/>',
      },
      children: [
        {
          path: 'dashboard',
          name: 'Dashboard',
          component: DashboardComponent
        }
      ]
    }
  ]

Answer 2

好吧，我自己弄清楚了。似乎内的每个路由定义都vue-router需要一个组件。因此它可以正确路由到DashboardComponent，但在其父项上没有任何可呈现的内容。我仅为其父router-view模板提供了一个简单的虚拟组件，它开始工作。