Set default meta properties on Vue Router

Question

I have searched the documentation here, and whilst there is a meta property on the VueRouter object, it doesn't seem to be doing anything (there is no description on the actual property in the docuementation)...

Consider the following routes:

let routes = [
    {
        path: '/',
        component: require('./views/Home').default
    },
    {
        path: '/about',
        component: require('./views/About').default,
        meta: {
            transitionColor: '#000' // Note this property
        }
    }
];

I would like to do something like this:

export default new VueRouter({
    mode: 'history',
    routes,
    meta: {
        transitionColor: '#fff'
    }
});

The intention of the above code is to set the default $route.meta.transitionColor to #fff for all routes, and then allow the route to override this if it is supplied in the route level meta.

Is there a way to set default meta properties on Vue Router in this way?

Answer 1

To my knowledge, it does not exist. However, with navigation guards, you can achieve something very similar.

router.beforeEach((to, from, next) => {
   // manipulate route (e.g. set meta)
});