Recommended way to manage routes?

Using Nuxt 3.

​

Currently I have a `routes.ts` file that has a list of routes:

// routes.ts

export const routes = { HOME: `${baseUrl}/home`, ABOUT: `${baseUrl}/about`, PRODUCTS: `${baseUrl}/products`, ... };

Instead of calling `navigateTo()` with hardcoded paths in components, I call `navigateTo()` and reference `routes` above.

I now need to add a route that has a dynamic parameter:

PRODUCT_DETAILS: `${baseUrl}/products/:productId`

What would be the best way to go about this?

1. ​

​

export const routes = { HOME: `${baseUrl}/home`, ABOUT: `${baseUrl}/about`, PRODUCTS: `${baseUrl}/products`, ... };

export const navigateToProductPage = (productId: string) => navigateTo(`${routes.PRODUCTS}/${productId}`);

2.

export const routes = { HOME: `${baseUrl}/home`, ABOUT: `${baseUrl}/about`, PRODUCTS: `${baseUrl}/products`, PRODUCT_DETAILS: (productId: string) => `${routes.PRODUCTS}/${productId}` ... };

3.

export const routes = { HOME: `${baseUrl}/home`, ABOUT: `${baseUrl}/about`, PRODUCTS: `${baseUrl}/products`, ... };

export const PRODUCT_DETAILS = (productId: string) => `${routes.PRODUCTS}/${productId}`; // Should I call this getProductDetailsPath()?

Open to other suggestions as well! I'm also wondering if I need to start using [Custom Routing](https://nuxt.com/docs/guide/going-further/custom-routing) instead.

​

I also saw a comment somewhere here about exposing a method for each route. I'm assuming they meant creating a navigate method for each route and calling that inside components, instead of calling the built-in `navigateTo()` helper from Nuxt. Has anyone tried that or have any inputs on that? Would that scale well? Potential limitations of that approach?

export const navigateToHome = () => navigateTo(routes.HOME);

export const navigateToAbout = () => navigateTo(routes.ABOUT);

export const navigateToProducts = () => navigateTo(routes.PRODUCT);

​