[Vuejs]-How to use a single route in different contexts?

by

0👍

it’s easy you can use alias option of vue-router:

{
        path: "/admin",
        name: "admin",
        component: Admin,
        children: [
            {
                path: 'event/create', // not repeat path from root
                alias: ['/event/create'],
                name: 'EventCreate',
                component: EventCreate,
                props: true
            }
            
            // many more routes...
        ]
        
}

and one more note never use a path that starts with / and repeat the parent path in children it doesn’t work at all it’s verbose, confusing and potentially error-prone

0👍

Share route properties with an object

Based on comment by @Estus Flask, here’s one way to have a cleaner routes definition:

Use a object to store shared properites, and use it in relevant routes, reducing duplication. Still, you must still have separate routes for contexts, which makes sense.

Object to hold shared properties:

const MyEventCreateRoute = {
    component: EventCreate,
    props: true,
    // other stuff
}

Routes use the shared properties with spread operator:

// Basic route; not in dashboard:
{
    path: '/event/create',
    name: 'EventCreate',
    ...MyEventCreateRoute
}

// Route in admin dashboard; renders inside <NuxtChild>:
{
        path: "/admin",
        name: "admin",
        component: Admin,
        children: [
            {
                path: '/admin/event/create',
                name: 'AdminEventCreate',
                ...MyEventCreateRoute
            }
        ]
}

Leave a comment