Динамическая маршрутизация vue, как получить все значения поста?

Question

[Niksak]

Как получить все данные из поста, на страницу которого мы переходим?
Допустим, нажал, перешел на страницу.
Вот код роута, файл router.js:

{
    path: '/posts/:id',
    component: PostPage //Часть где объявляю именно путь до страницы поста и компонент, отвещающий за это
  },

Код, где я вывожу информацию на странице
Файл PostPage:

<template>
  <div>
    <h1>{{ $route.params.id }}</h1>
  </div>
</template>

Вот тут я объявляю какую информацию получается выводить на страницу или как-то так
Файл PostItem

<div class="post-bttns">
    <MyButton @click="$router.push(`/posts/${post.body}`)">Просмотр</MyButton> //Здесь body это подробности поста
    <MyButton 
      @click = "$emit('remove', post)"
    >Удалить</MyButton>
  </div>

Ну и соответственно такой результат:

И получается что инфу можно брать только из URL? Нет конечно, но я не знаю как взять заголовок или id) Да и фигово смотрится огромная строка в url. А если на 10000 символов будет пост?

Как выводить информацию о посте, чтобы в url был заголовок или id а на странице уже все описание?

Comments

[Niksak]

Народ, только позавчера взялся за vue и нужно просто в этом разобраться до завтра)

[WapSter]

Niksak, информация не из роутера обычно берется, а из api, роутер лишь содержит вспомогательную информацию по которой можно получить остальную

[Niksak]

WapSter, ну вот я напишу например еще один блок, как в этом примере:

<template>
  <div>
    <h1>{{ $route.params.id }}</h1>
  </div>
</template>

Допустим, я после h1 напишу {{$route.params.title}} и ничего не будет:)
Или как это робит?

[WapSter]

Niksak, погугли что такое Rest Api, WebSocket, GraphQl. Дальше 1+1 сложить и может быть что-то будет "робить", хотя очень сомневаюсь

[Niksak]

WapSter, я эту херню делал на реакте, знаю как робит, но реализация во вью до сих пор непонятна:) Я знаю что такое апи, я оттуда информацию и беру, вывожу все посты и забиваю плейсхолдеры своими заголовками и описаниями для каждого поста
Но вот переход на определенную страницу и вывод чего-то кроме параметров из url это чет подводит меня

[WapSter]

Niksak, если ты делал это на реакте и не можешь на vue, что ж сочувствую тебе, так как ты настолько же плохо знаешь реакт как и vue

[Niksak]

WapSter, дааа да, пасиб, но я уже разобрался емае

[Константин Б.]

WapSter, тот случай когда понял что сморозил полную чушь, попытался выкрутиться, но получилось еще хуже)

Answer 1

[Алексей Ярков]

Элементарно же. В урл только id поста. На странице поста берёшь id из урла и идёшь на бэкенд за данными поста. Всё.

Comments

[Niksak]

То есть даже если у меня 10000 постов, всё равно делать запрос на сервер к ним и искать по каждому и сравнивать?

[Алексей Ярков]

Niksak, разумеется. А как ещё?

[Niksak]

Алексей Ярков, тот же вопрос)

[Niksak]

Щ@yarkov, не, а правда, это везде так делается, нормальная практика?
Если овер куча данных что просто как статей на Хабре, то проходить по всем ради того чтобы один выцепить?

[Алексей Ярков]

Niksak,

то проходить по всем ради того чтобы один выцепить?

Я не понимаю что тут написано.

У вас есть список постов. У каждого поста свой уникальный ID, который передаётся в адресной строке при переходе на страницу поста. Вот при переходе берём ID, шлём запрос в API типа /api/posts/{ID} и получаем информацию о посте.