Redirect 404 in Vue Router - 51

Here I wanted to solve a small situation that occurs when we enter a route that does not exist. Here I already have the solution. I am going to comment on it for a moment. We come here and we are going to enter any route that does not exist, for example the root, a blank page directly appears if we press F2 here or from here, right here I am going to indicate that this route does not match any because we do not have it defined here, that is the reason and the same if we go to another route that does not exist.

404 via components

We have a couple of levers to fix this, one of them is to create a specific component here so as a demonstration I am using the list category:

src/router.js

const routes = [
   {
       path: '/dashboard',
       component: Base,
       children: [
           ***
   },
   {
       path: '/:pathMatch(.*)*', 
       name: 'NotFound', 
       component: YourComponent404
   },
]

404 Redirect

Suppose this component does not exist or rather suppose this component is to show a message that says 404 then the client knows that the page does not exist but in this case it is the component that could be a solution again you would have to create a component for that purpose I am not going to do it really I do not see it necessary especially for this type of applications that are of an administrative nature I do not see much sense in showing a 404 page I think it is better to redirect so here we put redirect:

src/router.js

const routes = [
   {
       path: '/dashboard',
       component: Base,
       children: [
           ***
   },
   {
       path: '/:pathMatch(.*)*', 
       name: 'NotFound', 
       redirect: '/dashboard/movie'
   },
]

I already explained the line a little bit but I want to do the tests so that it is understood now notice that it redirects if for example here we put the root which was exactly what I wanted that when you launch this application to production we usually put the domain which in this case would be localhost 5173 but again if you go to production suppose it is vuecodig.con then as soon as you put that default route the 404 page would appear by default nothing would appear according to what we saw before because we do not have the root defined.