Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I go back/route-back on vue-router?

Ok, to explain this simply:

I have 3x pages.

  • Page 1 (Home)
  • Page 2 (Menu)
  • Page 3 (About)

Page 1 has a-

<router-link to="/menu"> 

button that when clicked routes to "/menu".

For now, Page 2 (Menu) has a

<router-link to="/"> 

button and when this button is clicked it reverts to the previous location "/" Page 1 (Home).

But I don't want to create a component for router for each page to 'go back' to the previous page (as if I had 100 pages this could be a lot of work routing back). Is there a way to do this with vue-router? similar to window.history.back()

Curious to see if there is a way to do this as I can't find it in the docs.

Thanks in advance! John

like image 316
John107 Avatar asked Jan 04 '18 23:01

John107


People also ask

How do you cancel a route on vue?

You can add a meta feild to that route you want to conditionally disable it like this: export const routes = [ {path: '/', component: foo}, {path: '/bar', component: bar, meta:{conditionalRoute:true}} ];

What is history mode in vue router?

The default mode for vue-router is hash mode - it uses the URL hash to simulate a full URL so that the page won't be reloaded when the URL changes. To get rid of the hash, we can use the router's history mode, which leverages the history.

How do I change my route on vue Cinema?

To listen for route change events with Vue. js and Vue Router, we can watch the $route object in our component. to watch the $route in our component. We set deep to true to watch for all changes in the $route object's contents.


1 Answers

You can use Programmatic Navigation. In order to go back, you use this:

router.go(n)  

Where n can be positive or negative (to go back). This is the same as history.back().So you can have your element like this:

<a @click="$router.go(-1)">back</a> 
like image 52
José Fernando Davila Avatar answered Oct 11 '22 07:10

José Fernando Davila