Capture dynamic routes such as
new-york
new-york/restaurants
tokyo
Install
npm install --save-dev @nuxtjs/router-extras
Edit nuxt.config.js
.
export default { modules: [ '@nuxtjs/router-extras', ],}
NOTE: The documentation recommend to use buildModules
(only use modules
if you are using Nuxt < 2.9.0
). I am using Nuxt 2.14.4
, and it seems like only modules
is working.
└── place
├── index.vue
└── restaurants.vue
Edit place/index.vue
.
<router>{ path: '/:urlName'}</router><template> <div>Place: {{ $route.params.urlName }}</div></template>
Edit place/restaurants.vue
<router>{ path: '/:urlName/restaurants'}</router><template> <div>Restaurants: {{ $route.params.urlName }}</div></template>