Why does the router show the wrong page when refreshing the page?

Question

Vue.js

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>

When I refresh the page in NewsPost, news itself is shown and not NewsPost, although the link does not change. How to fix?

Answer 1

It can be assumed that your content loading is not associated with the title, which is in the url, but with id, which is transmitted hidden and, of course, when the page is refreshed, it will not magically appear from anywhere. Refreshing the page is, in fact, just a new transition to the url that is in the address bar. If the address bar doesn't give your components enough information to know what to display, how will they display what you want?
You must store the connection somewhere titleand id, or requests must go to the server via title.
Of course, you can remember in cookies or some other storage a specific bundle titleandidfor a specific user, but this will make the links meaningless and impossible to transfer to others.