Trouble with routing Vue.js 2 and browser history

Question

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!

Decade Moon · Accepted Answer · 2018-05-09 09:53:33Z

1

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).

answered May 9, 2018 at 9:53

Decade Moon

34.4k8 gold badges84 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ростислав Rostefanko Over a year ago

Thank's !. Yes, data in the URL its not good. I think I will use a REST API (XHR request) in future

Ростислав Rostefanko Over a year ago

No, best choice - Vuex. It coll. That's all.

Collectives™ on Stack Overflow

Trouble with routing Vue.js 2 and browser history

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related