_.vue

Edit pages/_.vue

<template>  <div>Hello: {{ $route.params }}</div></template>

$route.params.pathMatch will show the full path, such as new-york or new-york/restaurants.

_

If you want separate .vue files for to handle new-york/restaurants or new-york/hotels, use the following setup.

└── _
    ├── index.vue
    └── restaurants.vue

Edit _/index.vue.

$route.params.pathMatch will show the full path, such as new-york or new-york/hotels.

<template>  <div>Hello: {{ $route.params }}</div></template>

Edit _/restaurants.vue

$route.params.pathMatch will show new-york if the url is new-york/restaurants.

<template>  <div>Restaurants: {{ $route.params }}</div></template>

@nuxtjs/router-extras

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>

Other Solutions

• @nuxtjs/router
• router.extendRoutes