If you are using Vue to build your own web application, you are certainly using Vue-Router as well. However, it’s not that easy to do. Here’s how to build a 404 page to every route that isn’t authorized.
1. Create a 404 component
First of all, create a 404 component in your components folder. Usual path is: src/components.
2. Import your component in Vue-Router
Therefore, import your component in your index.js file in router folder. If you are using Vue-Router, your path should be: src/router.
3. Define every non-existing routes
Finally, you want to redirect every non-existing routes to your 404 component. In Vue-Router, create a new object in routes array and add the following code:
The star means that every route that hasn’t been defined will lead to this 404 component.
Conclusion: Every web application should have its 404 page
Mainly for security. Why? Because you don’t want your users to access to unauthorized pages.
However, another reason is to inform that this page/component is not available anymore. You can put on a link to redirect immediately to starting page.
In conclusion, a 404 page gives also credits to your application. Because it shows that you build a real architecture. Besides, you could join Canva’s Top 50 Error’s Pages and become one of the most error’s pages known for their design.