Nuxt Js: Как передать параметр Dynami c в тег * bootstrap - vue b-nav-item

Question

В тексте. js Я использую bootstrap - vue для маршрутов.

Я могу создавать простые маршруты, следуя

<b-nav-item to="/licenses" v-if="isAdmin" active>
    <i class="fas fa-id-badge"></i> Licensing
</b-nav-item>

Но я хочу следующий URL.

http://localhost:3000/accept-license/N0trTjFISGdLOWxGZ29hZ2h0L2k3UT09/user/NFFEZVZ6ckNoazJOQmdYOXV2dWtXUT09/LV2mi1QDMKmCXn4cNeoOjp1Wx54jtOpI

Как его создать? Также, как загрузить файл подкачки для этих маршрутов, потому что структура nuxt имеет следующую структуру:

pages/
    licenses/
    --| view/
    -----| _id.vue

Answer 1

Это только теоретическое дополнение к отличному ответу @sthotakura.

Маршрутизация не имеет ничего общего с Bootstrap - vue.

Логами маршрутов c управляет сам Nuxt с использованием vue -рутов под капотом. Здесь ссылка на официальное руководство по nuxt

Nuxt создаст именованные маршруты для всех файлов в папке страницы. Имя вложенных маршрутов создается с использованием шаблона: имена папок отделяются от da sh "-"

Избегайте использования da sh "-" в именах ваших папок и файлов в каталоге Pages. Это затрудняет разработку и может вызвать ошибки. Лучше использовать low da sh "_" или чехол Cammel. Пример:

pages
  index.vue
  licences
    index.vue
    _licence-name
      index.vue 

создаст названные маршруты:

/
licences
licences-licence-name 

и

pages
  index.vue
  licences
    licence
      _name.vue
  licences.vue

создаст маршруты с тем же именем

Answer 2

Вы можете достичь желаемого результата, используя Dynami c Вложенные маршруты в Nuxt Js.

URL, который вы хотите:

http://localhost:3000/accept-license/N0trTjFISGdLOWxGZ29hZ2h0L2k3UT09/user/NFFEZVZ6ckNoazJOQmdYOXV2dWtXUT09/LV2mi1QDMKmCXn4cNeoOjp1Wx54jtOpI

Для цели этого ответа Я предполагаю, что ваш URL состоит из этих частей

~/accept-licene/{licenceid}/user/{userid}/{id}

Это может быть представлено следующей структурой папок в Nuxt Js.

pages/
  accept-license/
    _licenseid/
      user/
        _userid/
          _id.vue   

И тогда вы можете используйте именованный маршрут в вашем b-nav-item, чтобы перейти к этому месту:

<b-nav-item
  :to="{name: 'accept-license-licenseid-user-userid-id', params: {licenseid, userid, id} }">
    Accept License
</b-nav-item>

Я создал эту Песочницу , чтобы продемонстрировать этот ответ.