Customizing Route in Vue

Question

I'm using Vue and I currently have a page setup that is in the folder structure:

/pages/tg/_tg_id.vue

The setup is working fine as going to website.com/tg/<user-id> resolves to the user's page based off ID.

I'm now being asked to include a username in the URL, but I still need the id as names change and some user's don't even have a name. As a solution I'd like the new URL structure to be:

website.com/tg/<user-id>/<any string>

So that we can use a link that has the username in it, purely for vanity purposes (putting any string after the last slash should resolve in the exact same way).

I'm unsure of how to set something like this up, currently my nuxt.config.js file has no routing settings. Is there something I can add to settings to get the desired behavior?

Focos on the user id as the main parameter, and make the string that comes after optional. That's how most sites handle unique pages. If you need it to work without the name, in React you can create two different routes that render the same component. Makes two pages, and have each render the same component? — Marcus Cemes
– Marcus Cemes, Commented Feb 23, 2020 at 16:25

Aldarund · Accepted Answer · 2020-02-23 21:41:33Z

1

If you need only second option with username you can just rename your page to /pages/tg/_tg_id/_username.vue

and thats it.

If you still need your first url too you can use https://github.com/nuxt-community/router-extras-module and define alias inside your page or by extending routes by hand.

answered Feb 23, 2020 at 21:41

Aldarund

17.6k6 gold badges76 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Philip Kirkbride Over a year ago

Thanks I'll mark as solved when I have a chance to test tomorrow. I do need both.

Philip Kirkbride Over a year ago

I actually found that just having the file you mentioned first was enough to handle both situations, thanks.

Collectives™ on Stack Overflow

Customizing Route in Vue

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related