At the moment, if we go to a route that doesn't exist, we just see a page with a navigation as there is no route that matches our params. Wouldn't it be better to have a not found page? Let's add a not found component with some text and a router link that goes to the home page. js file, let's add another route.
If we want to match anything, we can use the asterisk as our path. But make sure to put it at the end after all other routes as the asterisks will match any route. The router reads the routes from top to bottom and stops looking for routes as soon as it finds a match. So if you put it as the first route, it will always match and you will constantly get a not found page.
Next we can add the name not found and we can import the not found component. Now if we go to application and add any word in our route, we will see the not found component and clicking the link will take us home. We can also see in the View Dev tools that we now have a route with a path of asterisks and the name not found. And if we go to a route that doesn't exist, you will see it loads the not found component.
However, did you notice that if you go to the Brazil component and change the name to Mexico, it doesn't give us the not found page? In this case, the URL is matching the route pattern, so the router serves the route, though our problem is one level lower. js file and the router is not aware of what's in that file or not. We need a way to check if the destination actually exists before we load the destination route.
We can do this using a navigation guard. Vue Router offers a few different navigation guards. You can think of them as Vue's lifecycle hooks that allows us to run code before and after the navigation takes place. We will use the before enter one.
Before we enter the root, we want something to happen. The beforeEnter function receives three arguments, to, the target root object being navigated to, from, the current root being navigated away from, and next. This function must be called to resolve the hook. The action depends on the arguments provided to next.
Let's add a beforeEnter guard to our root. What we want to happen is that before we enter the root, it checks to see if the location coming from the params is equal to one that exists in our store. And if it is, we allow the root to go ahead and show the destination it is meant to show. But if it isn't, then we need to go to the not found page.
In our before enter function, we can use the find method, which returns the value of the first element in the array that satisfies the provided testing function. So basically, we look through the destinations that come from the store and find the destination where the destination slug is equal to the slug which is the param slug of where the route is going to. If we find a route or if the route exists we call next so that the route will go ahead. Otherwise we will serve the not found route.
Now if we go to our application and click on Brazil and change the word Brazil to Mexico you will see we now go to the not found page. Great! However if you look at the console you will see we have a warning. missing param for named root not found, expected zero to be defined.
Basically, we cannot replace the current view with a named root that has an asterisk path. What we have to do is replace it with an explicit path that will match the not found path. For this, we can use an alias. An alias of asterisks for the path of 404 means when the user visits the 404 page, the URL remains as 404, but it will be matched as if the user is visiting the asterisks.
Let's change our path to be 404 and add an alias of asterisks. Now if we type Mexico in the URL, we will be brought direct to the 404 route. At the moment, if we go to a route that doesn't exist, we just see a page with a navigation as there is no route that matches our params. Wouldn't it be better to have a not found page?
Let's add a not found component with some text and a router link that goes to the home page. js file, let's add another route. If we want to match anything, we can use the asterisk as our path. But make sure to put it at the end after all other routes as the asterisks will match any route.
The router reads the routes from top to bottom and stops looking for routes as soon as it finds a match. So if you put it as the first route, it will always match and you will constantly get a not found page. Next we can add the name not found and we can import the not found component. Now if we go to application and add any word in our route, we will see the not found component and clicking the link will take us home.
We can also see in the View Dev tools that we now have a route with a path of asterisks and the name not found. And if we go to a route that doesn't exist, you will see it loads the not found component. However, did you notice that if you go to the Brazil component and change the name to Mexico, it doesn't give us the not found page? In this case, the URL is matching the route pattern, so the router serves the route, though our problem is one level lower.
js file and the router is not aware of what's in that file or not. We need a way to check if the destination actually exists before we load the destination route. We can do this using a navigation guard. Vue Router offers a few different navigation guards.
You can think of them as Vue's lifecycle hooks that allows us to run code before and after the navigation takes place. We will use the before enter one. Before we enter the root, we want something to happen. The beforeEnter function receives three arguments, to, the target root object being navigated to, from, the current root being navigated away from, and next.
This function must be called to resolve the hook. The action depends on the arguments provided to next. Let's add a beforeEnter guard to our root. What we want to happen is that before we enter the root, it checks to see if the location coming from the params is equal to one that exists in our store.
And if it is, we allow the root to go ahead and show the destination it is meant to show. But if it isn't, then we need to go to the not found page. In our before enter function, we can use the find method, which returns the value of the first element in the array that satisfies the provided testing function. So basically, we look through the destinations that come from the store and find the destination where the destination slug is equal to the slug which is the param slug of where the route is going to.
If we find a route or if the route exists we call next so that the route will go ahead. Otherwise we will serve the not found route. Now if we go to our application and click on Brazil and change the word Brazil to Mexico you will see we now go to the not found page. Great!
However if you look at the console you will see we have a warning. missing param for named root not found, expected zero to be defined. Basically, we cannot replace the current view with a named root that has an asterisk path. What we have to do is replace it with an explicit path that will match the not found path.
For this, we can use an alias. An alias of asterisks for the path of 404 means when the user visits the 404 page, the URL remains as 404, but it will be matched as if the user is visiting the asterisks. Let's change our path to be 404 and add an alias of asterisks. Now if we type Mexico in the URL, we will be brought direct to the 404 route.