router-view content not rendering

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

3 thoughts on “router-view content not rendering”

  1. 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
            }
          ]
        }
      ]
    
    Reply
  2. Other way – just add a template to a parent

     const router = new VueRouter({
        routes: [{ path: "/", component: YourComponent }],
    });
    
    new Vue({
        router,
        template: '<router-view/>',
    }).$mount("#mounting");
    
    Reply
  3. 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.

    Reply

Leave a Comment