Vue three introduced the new Composition API. This lesson requires a basic understanding of it. If you aren't familiar with it, then you can check out Vue School's Composition API course or the official Vue docs linked in the description below. If the Composition API is outside of the scope of what you want to learn right now, no problem.
This lesson is not essential to being successful with Vue Router. You can consider yourself done with the Vue Router course and thanks for watching. But if you want to use Vue Router with the Composition API, then stick around. All right, let's take a look at how we can use Vue Router along with the composition API.
First, let's refactor our login page to use the setup function. We want to define our data in the setup as opposed to the data property. I'll import ref from view and use it to create a reactive reference for username and password. Then I'll return username and password from the setup function.
Now we can delete the data option as it's no longer needed. That takes care of converting our data to the Composition API. Now let's refactor our login method to use the Composition API. We'll create a login function inside of the setup method.
We can cut the meat of the login method from the methods option and then remove the methods altogether. Let's paste what we cut into our new login function. since we don't have access to the this keyword in the setup function. Finding that keyword in our login function is going to be a good guide on what we need to change.
value to reference the username ref we created above. DollarSignRouter. This is what you've come to see. How are we supposed to access the route and the router now that we don't have access to it via the this keyword?
DollarSignRoute. Let's import those functions now. Now we can call those methods to get access to the route and the router instances. Now it's just a matter of referencing the constants where we referenced this dot dollar sign route and this dot dollar sign router previously.
Finally, we need to return login from the setup function. Awesome. Let's check it out in the browser and make sure things are working just as they were before. Looks good.
Besides accessing the route and the router in the composition API, you can also define in-component navigation guards. Let's go over to the invoices page and see how this works. We can pretend that the invoices portion of our app is a real sticking point and we really want our users to be there as much as possible. So let's hit them up with an alert when they attempt to leave in order to entice them to stay.
We'll add a script section and the setup method to our page. In order to know when the user is leaving, we'll need to import and use the onBeforeRouteLeave function from Vue Router. onBeforeRouteLeave takes a callback function that will execute before the router navigates to the next route. Returning faults from this function will prevent the navigation from happening.
This is just what we want. Let's show the user a confirm dialog, and if they cancel the confirm dialog, we'll return faults to prevent the route from changing. All the rest of Vue Router works exactly the same as I've shown you throughout the course in any application where you're utilizing the Composition API. You still define routes as normal, add global navigation guards, access dollar sign route and dollar sign router in the templates, and so on.
Just remember, if you want access to Vue Router in the setup method, there are a few extra functions provided by Vue Router to be aware of. All right, that brings us to the end of our course on Vue Router. I hope you've enjoyed building the travel app and have learned a lot from it. Don't forget to share what you have built with us.
And if you have any questions or doubts, please reach out to the team here at ViewSchool or on Twitter. And I look forward to seeing you in the next course.