Issue rendering child views in Vue with Vue Router

Question

I'm having trouble getting my child views to render in Vue.

My main.js file looks like this

import DashboardProducts from './components/Dashboard/DashboardProducts'
import DashboardSettings from './components/Dashboard/DashboardSettings'


Vue.use(VueRouter)
Vue.use(Vuex)

const routes = [
  { path: '/activate', component: Activate },
  { path: '/dashboard/:view', component: Dashboard, 
    children: [ 
      { path: 'products', component: DashboardProducts },
      { path: 'settings', component: DashboardSettings }
    ]
  },
  { path: '/login', component: Login },
  { path: '/account', component: UserAccount }
];

const router = new VueRouter({
  routes // short for routes: routes
});

export default router;


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
});

As you can see I have imported the components and get no errors. I have also added them as children of Dashboard and set their paths.

In my Dashboard.vue view I do this

<template>
    <div>
        <dashboard-nav></dashboard-nav>

        <!-- Will display product and settings components -->
        <router-view></router-view>
    </div>
</template>

<script>
import DashboardNav from '../components/Dashboard/DashboardNav'

export default {
    name: 'Dashboard',
    components: {
        DashboardNav
    }
};

</script>

<style>

</style>

Urls are matching but no components are rendering. What am I missing?

Here is a JSFiddle of pretty much what I'm going for https://jsfiddle.net/dtac5m11/

It seems to be working fine there but I'm also using single file components in my app so it may be a little different?

Again, the issue is getting the child components to render when their routes match. Currently no components are being mounted.

UPDATE:

I am getting the DashboardProducts component to render but can't get DashboardSettings to render.

Thanks!

could you tell us what is the issue? Try to create webpack bin with your content — Marek Urbanowicz
The issue is child components aren't rendering when their routes match. I have a JS Fiddle here where it seems to be working fine but can't figure out why it isn't working in my app jsfiddle.net/dtac5m11 — maxwellgover
Just use /dashboard instead of /dashboard/:view, then it will work on /dashboard/settings — CodinCat
Also, remove the slash of /settings, just path: 'settings' — CodinCat

Nazgul Mamasheva Nazgul Mamasheva · Accepted Answer · 2017-01-11T11:30:47

{ path: '/dashboard/:view', component: Dashboard,

At first, for what purpose do you add :view after dashboard path? If you are using this one for children path as a parameter, it is an issue. It is the reason, why your children component are not rendering. Because, :view is for dynamic routes. /dashboard/:view is equivalent to /dashboard/* and it means that after /dashboard there can be any route and this route will render Dashboard component. And your children paths /dashboard/products and /dashboard/settings will always match /dashboard/:view and render parent component-Dashboard. So, in your case, your routes for children components are known. So you do not need to use :view. More, https://router.vuejs.org/en/essentials/dynamic-matching.html.

Issue rendering child views in Vue with Vue Router

1 Answers