Vue router not following children paths

Question

I'm having problems to make my http://localhost:8080/myapps/config route load. If I use http://localhost:8080/myapps everything works ok and I get a list of my apps. But when I want to access an app config through http://localhost:8080/myapps/config it loads the content of /myapps again. However, the url in my browser shows the correct path /myapps/config.

I have been checking the routher for some hours but everything seems to be ok. Could anybody shed some light?

My router file:

import Vue from 'vue'
import Router from 'vue-router'

const MyApps = () => import('../views/app/subviews/MyApps');
const AppKeyValue = () => import('../views/app/subviews/AppKeyValue');

import MainView from '../views/app/MainView'

Vue.use(Router)

export default new Router({
    mode: 'history',
    routes: 
    [
        {
            path: '/',
            component: MainView,
            redirect: 'myapps',
            children: 
            [
                {
                    path: 'myapps',
                    component: MyApps,
                    meta: 
                    {
                        requiresAuth: true,
                        breadcrumb: 'My Apps'
                    },
                    children:
                    [
                        {
                            path: 'config',
                            component: AppKeyValue,
                            meta: 
                            {
                                requiresAuth: true,
                                breadcrumb: 'App configuration'
                            }
                        },
                    ]

                },
            ]
        },
    ]
})

Everything works ok if I don't use child routes:

export default new Router({
    mode: 'history',
    routes:
    [
        {
            path: '/',
            component: MainView,
            redirect: 'myapps',
            children: 
            [
                {
                    path: 'myapps',
                    component: MyApps,
                    meta: 
                    {
                        requiresAuth: true,
                        title: 'message.ecommerce',
                        breadcrumb: 'My Apps'
                    },
                },
                {
                    path: 'myapps/config',
                    component: AppKeyValue,
                    meta: 
                    {
                        requiresAuth: true,
                        title: 'message.ecommerce',
                        breadcrumb: 'App configuration'
                    }
                }
           ]
     }
]}

Bennett Dams Bennett Dams · Accepted Answer · 2018-09-18T14:50:05

You didn't post your *.vue components, but I assume you're missing <router-view> in the second level component.

Example:

MainView is mapped to / and has 1 children route (/myapps). You're probably using <router-view> in your MainView.

MyApps is mapped to myapps as a children of the /-route and has 1 children route (/config).

Add a <router-view to your MyApps.vue to let it display its children (which is just /config in your case).

Similarly, a rendered component can also contain its own, nested <router-view>.

https://router.vuejs.org/guide/essentials/nested-routes.html#nested-routes

BTW: That's also why your second router config is working: The main route has two children (/myapps and /myapps/config), which both get displayed by the MainView's <router-view>.

Here is a working example from the documentation:

https://jsfiddle.net/nazgul_mamasheva/zrcLe9z7/1/

Vue router not following children paths

1 Answers