Nuxt dynamic url param for application - vue.js

Question

I'm quite new to Vue and Nuxt and I built a web app. I need to show url based on city, but don't know what kind of routing is this.
I have web app under domain mydomain.com and there are pages like:
/ - for home page (mydomain.com)
/list - for list of items (mydomain.com/list)
/list/123 - item page, where 123 is id of item (mydomain.com/list/123)
What I want it is to get user's location and write it to vuex store and show urls with city prefix always, so it will look like:
/paris/ - for home page (mydomain.com/paris)
/paris/list - for list of items (mydomain.com/paris/list)
/paris/list/123 - item page, where 123 is id of item (mydomain.com/paris/list/123)
User will be able to change city using dropdown. I'm using nuxt and all url parts are used from pages, but in this case city is not the page it is kind of param. Please advice where to look.

Answer 1

It's achievable using vue-router. You can setup paths there like:
{
path: '/:city',
name: 'City',
component: City
},
{
path: '/:city/list',
name: 'List',
component: ListCmp
},
{
path: '/:city/list/:id',
name: 'ItemPage',
component: ItemPageCmp
},
Your template link for the ListCmp would be:
<router-link :to="{name: 'List', params: {city: 'Paris'}}">Paris</router-link>
And in your component you would access your param:
this.$route.params.city