Почему при обновлении страницы роутер показывает не ту страницу?

Question

[Ibishka]

index.js

{
    path: "/news/:title",
    name: "NewsPost",
    component: () => import("../views/NewsPost.vue")
  }

News.vue

<router-link
              :to="{
                    name: 'NewsPost', 
                    params: {
                      title: `${news.title.toLowerCase().replace(/\s+/g,'-')}`,
                      id : news.id
                    }
                  }"
            >{{news.title}}</router-link>

Когда обновляю страницу в NewsPost показывается сам news а не NewsPost хотя линк не меняется. Как исправить?

Answer 1

[Aetae]

Можно предположить, что загрузка контента у вас связанна не с title, который есть в url, а с id, который передаётся скрыто и, само собой, при обновлении страницы ни откуда не появится магическим образом. Обновление страницы - это, по сути, просто новый переход по тому url, который лежит в адресной строке. Если адресная строка не даёт вашим компонентам достаточно информации для понимания, что именно отображать - как они вам отобразят то, что вы хотите?
У вас где-то должна храниться связь title и id, или запросы вовсе должны идти на сервер по title.
Вы конечно можете запоминать в куках или каком ещё хранилище конкретную связку title и id для конкретного пользователя, но это сделает ссылки бессмысленными и невозможными к передаче другим.

Comments

[Ibishka]

Aetae, Говорите запрос к бд по тайтл. Но у меня же тайтл такой формируется hello-world-hi-world. Но в бд так Hello worl hi world. Как тогда сделать запрос и вытянуть запись если тайтл отличаются

[Aetae]

Ibishka, добавить в базу автогенереируемое индексируемое уникальное поле url, которое получается из title при добавлении записи условно путём

`${news.title.toLowerCase().replace(/\s+/g,'-')}` + добавление ещё чего-то в случае недостаточной уникальности

После, использовать именно поле url как в запросах, так и в роутах Vue.