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:

_____path: ‘*’,
_____name: ‘FourZeroFour’,
_____component: FourZeroFour

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.

Guillaume Duhan

Partagez cet articleShare on Facebook0Tweet about this on Twitter0Share on Google+0Pin on Pinterest0Share on LinkedIn0Email this to someonePrint this page

# # #

8 July 2018