CODEWITHSUNDEEP
vue.jsvue-router
Ростислав Rostefanko
Ростислав Rostefanko

Reputation: 13

Trouble with routing Vue.js 2 and browser history

Faced such a problem - I send data to the props of the /router-link/ tag, when I click on the link, I go to the article, it gets the data, everything works. Well, if you press the "back" button in the browser and then "forward" there will be no articles, there will be empty fields without data. How can this be avoided?

This is link to the article

<h3 class="database-article__title">
    <router-link
        :to="{name : 'article',params: {
        id: item.id ,
        type:item.type ,
        name: item.name,
        text: item.text,
        author: item.author,
        isFavorite: item.isFavorite
    }}"> {{item.name}} </router-link>
</h3>

Little part of article-template.vue

<div class="content-type marketing">
    {{$route.params.type}}
</div>

<h3 class="database-article__title">
    {{$route.params.name}}
</h3>

<div class="database-article__text">
    {{$route.params.text}}
</div>

Once again, the data transfer is good, when you click on the link, everything is displayed. The problem is that when clicking on the buttons in the browser "back" and "forward" - the browser history is not saved.

Does anyone know the solution to the problem, or where i can read how to solve it?

Thanks!

Upvotes: 1

Views: 1211

Answers (1)

Decade Moon
Decade Moon

Reputation: 34306

My guess is that your article route does not specify any of those params in its path. When you click the link, vue-router will remember the params object you specified in the <router-link> and will be accessible through $route.params in the article component.

However, when you click the browser back then forward buttons, the transition to the article route did not occur by clicking the <router-link> like it did the first time, and since those params were not included in the route's path, $route.params will be empty.

I'm guessing you're just trying to pass data from one route to another. If you want it to persist across history state changes (i.e. browser back/forward), then either:

  • The data needs to be included in the URL, either as params (e.g. /article/:id/:type etc, this needs to be specified upfront in the route's path) or in the query string (e.g. /article?id=1&type=foo). This isn't ideal for this situation.
  • (Recommended) Store the item object in such a way that it can be accessed by any route. Vuex is one way, but this may be overkill.

Realistically your URLs should only need to have the article's ID in it, like this /article/1. All the other stuff like type/name/etc don't belong in the URL. From the ID you should be able to fetch the full article object either from a REST API (XHR request), or obtain it from some in-memory data store abstraction (Vuex or anything else really).

Upvotes: 1

Related Questions