Nuxt динамический URL-параметр для приложения - PullRequest
Новая
       24

Nuxt динамический URL-параметр для приложения

0 голосов
/ 19 октября 2019

Я довольно новичок в Vue и Nuxt, и я создал веб-приложение. Мне нужно показать URL в зависимости от города, но я не знаю, что это за маршрутизация.

У меня есть веб-приложение в домене mydomain.com, и есть такие страницы, как:

  • / - для домашней страницы (mydomain.com)
  • /list - для списка элементов (mydomain.com/list)
  • /list/123 - страница элемента, где 123 - это идентификаторitem (mydomain.com/list/123)

Я хочу получить местоположение пользователя, записать его в хранилище vuex и всегда отображать URL с префиксом города, поэтому он будет выглядеть так:

  • /paris/ - для домашней страницы (mydomain.com/paris)
  • /paris/list - для списка элементов (mydomain.com/paris/list)
  • /paris/list/123 - страница элемента, где 123id элемента (mydomain.com/paris/list/123)

Пользователь сможет изменить город с помощью выпадающего списка. Я использую nuxt, и все части URL используются со страниц, но в данном случае город - это не страница, а своего рода параметр. Посоветуйте, пожалуйста, где искать.

1 Ответ

1 голос
/ 19 октября 2019

Это достижимо при использовании vue-router. Вы можете настроить пути там как: 

{
    path: '/:city',
    name: 'City',
    component: City
},
{
    path: '/:city/list',
    name: 'List',
    component: ListCmp
},
{
    path: '/:city/list/:id',
    name: 'ItemPage',
    component: ItemPageCmp
},

Ваша ссылка на шаблон для ListCmp будет: 

<router-link :to="{name: 'List', params: {city: 'Paris'}}">Paris</router-link>

И в вашем компоненте вы получите доступ к вашему параметру: 

this.$route.params.city
...