路由器视图内容未呈现

Question

我的应用程序的 router-view 内容始终为空 ()，即使路由本身完美运行并且模板在整个应用程序中正确呈现也是如此。

（注意：尽管只有 import Vue from 'vue';，我使用的是支持编译的独立版本 Vue.js。正确的导入被 webpack 取代。）

main.ts

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

services/router/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

好吧，我自己想出来了。 vue-router 中的每个路由定义似乎都需要一个组件。所以它正确地路由到 DashboardComponent，但没有任何东西可以在它的父级上呈现。我为父级提供了一个简单的虚拟组件，只有一个 router-view 作为它的模板，它开始工作了。

Answer 2

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

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

Answer 3

其他方式 - 只需将模板添加到父项

 const router = new VueRouter({
    routes: [{ path: "/", component: YourComponent }],
});

new Vue({
    router,
    template: '<router-view/>',
}).$mount("#mounting");

路由器视图内容未呈现

router-view content not rendering

javascript

node.js

vue.js

vue-router

vuejs2

main.ts

main.template.pug（摘录）

app.ts（摘录）

app.template.pug

services/router/index.ts（节选）