Nuxt-Link отображать слаг не идентификатор - PullRequest
Новая
       39

Nuxt-Link отображать слаг не идентификатор

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

Вот мой код для отображения списка статей моего блога: 

  <nuxt-link :to="postLink" class="post-preview">
    <article>
      <div class="post-thumbnail" :style="{backgroundImage: 'url(' + thumbnail + ')'}"></div>
      <div class="post-content">
        <h1>{{ title }}</h1>
        <p>{{ previewText }}</p>
      </div>
    </article>
  </nuxt-link>
</template>

Функция postLink вызывается при нажатии на сообщение в блоге со следующим кодом: 

  computed: {
    postLink() {
      return this.isAdmin
        ? "/admin/" + this.id + "?" + this.slug
        : "/posts/" + this.id + "?" + this.slug;
    }
  }

проблема в том, что я не хочу, чтобы идентификатор ключа Firebase отображался в URL, я хочу отобразить слаг. Отслеживание идентификатора ключа Firebase плохо читается в Google Analytics. У меня есть слаг, сохраненный в моей базе данных Firebase, и я могу получить доступ к слагу на своей странице, но я не могу просто вызвать только слаг в пути, я должен по какой-то причине включить идентификатор. В данный момент я использую обходной путь, который заключается в добавлении строки запроса, но что я действительно хочу, это отображать только слаг в URL. Должен быть способ сделать это. Вы можете просмотреть это в действии на моем сайте: https://igeddit.ca

Каждый пост отображается с этой файловой структурой в Nuxt:

image

Заранее спасибо .. .

1 Ответ

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

Спасибо за ответ ManUtopiK, но для людей, которые не знают, это расплывчатый ответ. С момента публикации моего вопроса я нашел ответ. Поэтому для тех, кто ищет ответ, я изменил свою предыдущую структуру папок с posts / _id / index.vue на posts / _slug / index.vue.

Вы делаете это так, что слаг становится маршрутом.

Код сверху теперь изменяется на: 

<nuxt-link :to="postLink" class="post-preview">
....
 postLink() {
      return this.isAdmin
        ? "/admin/" + this.id
        : { name: "posts-slug", params: { id: this.id, slug: this.slug } };
    }

Этот код передает идентификатор и слаг. Пуля ожидается на маршруте. Примечание: вы можете получить имя: "posts-slug" из папки .nuxt / router.js.

...