Vue router inherit parent properties

Question

I'm fairly new to vue.js and I'm currently trying to setup my different routes. I'm using sub routes, since the "logged in" user will have a different UI than a visitor.

Currently my setup is like this:

routes: [
    {
        path: '/auth',
        name: 'auth',
        component: test,
        meta: {
            auth: false
        },
        children: [
            {
                path: 'login',
                name: 'login',
                component: login
            },
            {
                path: 'signup',
                name: 'signup',
                component: signup
            }
        ]
    },

    {
        path: '/user',
        name: 'user',
        component: test,
        meta: {
            auth: true
        },
        children: [
            {
                path: 'profile',
                name: 'profile',
                component: login
            }
        ]
    }
]

While this is working, I'm wondering why child routes don't take over the parents meta properties. Do I need to assign the meta.auth to each sub route? Or is there any way to inherit this?

Essentially in the router.beforeEach, I want to check if the user is authenticated correctly or not. But only on child routes of /user

I'm also coming from an angular background, so I'm used to nesting routes, not sure if this is the best way in Vue.

Answer 1

To answer my own question: https://github.com/vuejs/vue-router/issues/704

I didn't realise this was deprecated in Vue-router 2.0, it is possible to get the matched route and find the meta there.