K
K
Kirill Gorlov2018-09-27 13:45:53
Vue.js
Kirill Gorlov, 2018-09-27 13:45:53

How to make a proper smart back button in VueJS?

I rummaged through half the Internet in search of an answer, and everywhere I did not find anything specific, or suitable. I am reaching out to the community with my question. Perhaps someone has already faced such a dilemma.
I can't figure out how to properly make a BACK button in a VUE JS application with a VUE ROUTER connected.
I will give a simple example on the blog.
There is a list of blog posts at URL : /posts
There is a blog post view page URL : /post/:id
The post view page has a back button. According to the VUE JS documentation, this is made simple And everything seems to be fine, but if we go directly to the post view??? Where will it lead ??? That's right - nowhere. The option is not suitable, since we need to go back to the list of blog posts.router.go(-1)
router.go(-1)
Next option, specify directly

<router-link to="/posts" class="backlink">
   Назад
</router-link>
. So good, everything seems to be great. Now the problem with directly following the link to the post is solved, only another problem appears. Scroll positioning. When we go(-1) we save all the posts that have been loaded into the list, and when we go to="/posts" the component reloads the posts and positions itself at the top. Okay, positioning, the component just starts loading data again.
Problem three. If, for example, we went to the post not from the general list, but from the proposed news in some other blog post, then the "back" button should still lead back to the previous entry, and not to the general list.
I tried to find something like the REFFERER of the transition history to build logic based on it, but I could not find anything like it. It seems that this is somehow implemented through Route Hooks, but unfortunately I do not have such experience with them.
There is an idea to write, for example, the last 5 transitions in STORE to the refferers array and build logic from there, but it smells like a crutch.
Tell me how to be?

Answer the question

In order to leave comments, you need to log in

4 answer(s)
A
alvvi, 2018-09-27
@alvvi

So good, everything seems to be great. Now the problem with directly following the link to the post is solved, only another problem appears. Scroll positioning. When we go(-1) we save all the posts that have been loaded into the list, and when we go to="/posts" the component reloads the posts and positions itself at the top. Okay, positioning, the component just starts loading data again.

It is not clear what positioning and loading we are talking about here, if your rendering differs when you go to the screen with posts through / posts and through router.go (-1) - this is a problem of a different nature and needs to be solved outside of this question. It can differ only in the absence of loading in the second option, if you do not cache data and this is normal.
Write in the Store the name of the route where you want to redirect when you click on Back, on the beforeRouteLeave of the screen with the proposed news - change to another route.
The documentation has more than detailed information about all hooks, read, try, get experience.

M
Maxim Tikhonov, 2018-09-28
@mylp

Router mode 'history'

A
Andrey Andreev, 2018-09-27
@b0nn1e

document.referrer

S
senya_jan, 2018-09-29
@senya_jan

Why not look where go (-1) leads, and there, through the conditions, redirect the user yourself if you are not satisfied with what is inside go (-1)

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question