CODEWITHSUNDEEP
vue.jsvue-routernuxt.js
Philip Kirkbride
Philip Kirkbride

Reputation: 22879

Customizing Route in Vue

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?

Upvotes: 0

Views: 100

Answers (1)

Aldarund
Aldarund

Reputation: 17621

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.

Upvotes: 1

Related Questions