In this lesson, I want to show you how to work with the query parameters. Query parameters are the variables defined in the URL. Let me show you an example. As we don't have any, we can just add them directly in our URL field in our browser.
Then in our view dev tools, you can see that in the root object, we have a query key object and inside it we have the keys of destination and experience with the values of Brazil and Salvador. As you can see, we have access to the query parameters right here in our route. Query parameters can be used for many things such as search or filtering. Let's look at a real example.
In Zara's page, let's search for some shoes. You will see that in the query params, we have the search word that we typed in, shoes. We don't have a search or a filter, but we do have a hidden flaw in our app. Our login form will always redirect.
to the user route, no matter which page the user actually tries to visit. So let me show you how we can fix that with query params. Please note that there are many ways to achieve this. This is one technique.
Before we start, let's create another protected page. I'll call it Invoices. js file, we can add our new route with our Requires Auth meta, as this page requires authentication. as it wouldn't be a good idea to share our invoices with the world.
And in our user page, we can create a link to our invoices. Let's make sure our link works. What I want to do is to make sure we redirect the user to the correct URL after he or she successfully logs in. There are many ways to achieve this behavior.
We could store the redirect URL in our state, or we can use query params. If we add a redirect parameter to the URL, We can use that path instead when we're redirecting the user in our login component. There might be cases when the query parameter isn't available, so let's add support for that. query redirect or the home root if it doesn't exist.
Great, let's test it in the browser. As you can see, we don't have the redirect parameter URL, so our code wouldn't work as we want it to. Let's see what we can do about that. We can actually set the query params ourselves if we want to, by setting the query property when calling next.
We know where the user wants to go to, so let's set the redirect to the full path. We now have the redirect param in our URL with the correct route that we want to go to. form has login with redirect to invoices. And the $root2 value is the invoices page, which is exactly where we want to go, which improves the user experience for our login form drastically.
And that brings us to the end of our course on Vue Router. I hope you have enjoyed building the travel app and have learned lots 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 will look forward to seeing you in the next course.
In this lesson, I want to show you how to work with the query parameters. Query parameters are the variables defined in the URL. Let me show you an example. As we don't have any, we can just add them directly in our URL field in our browser.
Then in our view dev tools, you can see that in the root object, we have a query key object and inside it we have the keys of destination and experience with the values of Brazil and Salvador. As you can see, we have access to the query parameters right here in our route. Query parameters can be used for many things such as search or filtering. Let's look at a real example.
In Zara's page, let's search for some shoes. You will see that in the query params, we have the search word that we typed in, shoes. We don't have a search or a filter, but we do have a hidden flaw in our app. Our login form will always redirect.
to the user route, no matter which page the user actually tries to visit. So let me show you how we can fix that with query params. Please note that there are many ways to achieve this. This is one technique.
Before we start, let's create another protected page. I'll call it Invoices. js file, we can add our new route with our Requires Auth meta, as this page requires authentication. as it wouldn't be a good idea to share our invoices with the world.
And in our user page, we can create a link to our invoices. Let's make sure our link works. What I want to do is to make sure we redirect the user to the correct URL after he or she successfully logs in. There are many ways to achieve this behavior.
We could store the redirect URL in our state, or we can use query params. If we add a redirect parameter to the URL, We can use that path instead when we're redirecting the user in our login component. There might be cases when the query parameter isn't available, so let's add support for that. query redirect or the home root if it doesn't exist.
Great, let's test it in the browser. As you can see, we don't have the redirect parameter URL, so our code wouldn't work as we want it to. Let's see what we can do about that. We can actually set the query params ourselves if we want to, by setting the query property when calling next.
We know where the user wants to go to, so let's set the redirect to the full path. We now have the redirect param in our URL with the correct route that we want to go to. form has login with redirect to invoices. And the $root2 value is the invoices page, which is exactly where we want to go, which improves the user experience for our login form drastically.
And that brings us to the end of our course on Vue Router. I hope you have enjoyed building the travel app and have learned lots 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 will look forward to seeing you in the next course.