CODEWITHSUNDEEP
vue.jsvue-router
maxwellgover
maxwellgover

Reputation: 7111

Issue rendering child views in Vue with Vue Router

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.

enter image description here enter image description here

Thanks!

Upvotes: 0

Views: 4455

Answers (1)

Nazgul Mamasheva
Nazgul Mamasheva

Reputation: 119

{ 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.

Upvotes: 1

Related Questions