Creating a Go-Back button
In this lesson, we learn how to create a go-back button and programmatically navigate to the previously visited page with Vue Router.
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 go back and a button with the text go back.
We can then add the Vyond directive with the event of click. The Vyond directive listens to DOM events and runs some JavaScript when they're triggered. The shorthand for Vyond is the at symbol. and we will use the shorthand in this course.
Now we need to create the goBack function. For this we will use a method. A method is a function associated with the view instance. Methods are defined inside the methods property.
Let's create our goBack function inside our methods. We want this function to tell the router to go back one root. go. This method takes a single integer as a parameter that indicates by how many steps to go forwards or go backwards in the history stack.
Let's pass it the value of minus one as we want it to go back one. Let's add some styles. Now we need to import our go back button into our destination details page. First, we import the component and then add the component name to our components property.
We then add this component to the template. Okay, let's take a look and see if it works. Great! Our go back button works perfect.
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 go back and a button with the text go back.
We can then add the Vyond directive with the event of click. The Vyond directive listens to DOM events and runs some JavaScript when they're triggered. The shorthand for Vyond is the at symbol. and we will use the shorthand in this course.
Now we need to create the goBack function. For this we will use a method. A method is a function associated with the view instance. Methods are defined inside the methods property.
Let's create our goBack function inside our methods. We want this function to tell the router to go back one root. go. This method takes a single integer as a parameter that indicates by how many steps to go forwards or go backwards in the history stack.
Let's pass it the value of minus one as we want it to go back one. Let's add some styles. Now we need to import our go back button into our destination details page. First, we import the component and then add the component name to our components property.
We then add this component to the template. Okay, let's take a look and see if it works. Great! Our go back button works perfect.
This transcript is generated automatically from the lesson video. Spotted an inaccuracy? Let us know at team@vueschool.io.
