router-view content not rendering

Question

The router-view content of my app always remains empty (<!---->) even though routing itself works perfectly and templates are correctly rendered throughout the app.

(Note: Even though there's just a import Vue from 'vue';, I'm using the standalone version of Vue.js with compilation support. The correct import is replaced by 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 (excerpt)

body
  #app-container

app.ts (excerpt)

@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 (excerpt)

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
        }
      ]
    }
  ]
});

Solution 1

Alright, I figured it out myself. It seems like that every route definition within the vue-router requires a component. So it correctly routed to the DashboardComponent, but had nothing to render on it's parent. I provided a simple dummy component for the parent with just a router-view for it's template and it started working.

Solution 2

Yep.. the Home route doesn't have a component... You could simply do:

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

Comments

[maelgrove]

Even though I figured it out myself, I'm going to accept this answer. I wasn't aware that you can also declare templates within the router configuration, so that's a nice addition to the answer. :)

[Lucas Katayama]

You just need to remember to install runtime-compiler. If you don't want to use it, you need to create a component with only router-view.