Go Back
In this lesson, we use Vue Router's back method to create a simple yet fully functional back button. Clicking the custom back button is the equivalent of clicking the back button in the browser.
Links
LESSON TRANSCRIPT
Our app is starting to take shape, but there is still room for improvement. Let's add a Go Back button so we can easily navigate to the last page we visited. First, let's create a Go Back component. We can add a span with the class of Go Back.
and a button with the text go back. We can then add the V on directive with the event of click. The V on directive listens to DOM events and runs some JavaScript when they're triggered. The shorthand for V on is the at symbol.
And we will use the shorthand in this course. back. Basically, it will listen for a click event and it will call the back method of the router every time it is clicked. It functions exactly the same as the user hitting the back button in the browser.
That's it for the go back component. Now we need to import our go back button into the destination show page. Then we need to add the component name to our components property. And then we'll add it in the template.
Okay, let's take a look and see if it works. Great, our back button works perfectly.
This transcript is generated automatically from the lesson video. Spotted an inaccuracy? Let us know at team@vueschool.io.
