Vue - How to create 404 error page with 404 response code

Question

How can I create 404 error page with 404 response code in Vue? Here is the route for 404.

{
    path: "*",
    name: "404",
    component: load("404"),
    alias: "/404"
  }

Answer 1

You won't be able to set the HTTP status code in a Single-Page Application - all the routing is done on the same page in the browser so once the page is loaded no more HTTP status codes will be received.

However, if you try to load a non-existent route by directly typing/copying the URL into the address bar of the browser - then you can use nginX (or whatever server software you are using) to signal 404 HTTP status:

server {
  error_page 404 /404.html;

  location / {
    try_files $uri $uri/ =404;
  }
}

But this is not a practical/wise approach - basically, you want every non-existent path to be resolved to /index.html so that your SPA is always loaded and once loaded - it will detect that this route does not exist and will render your 404 component.

So your nginX config should look like this:

server {
  ...

  location / {
    try_files $uri /index.html$is_args$args;
  }
}

The $is_args variable will add ? if $args is not empty while $args will provide the query parameters (if any).

Answer 2

Like IVO GELOV wrote, you have to force this on the server. I came across the issue with Apache (IVO GELOV provides help on nginx).

In the vue router (Vue 3):

const routes = [
  {
    // Your other routes here
    // ...
  {
    path: '/404',
    name: '404',
    component: Error404,
  },
  {
    path: '/:pathMatch(.*)*',
    beforeEnter() { window.location.href = "/404" },
  },
]

With the last route item, all non-matched routes will be redirected to /404. I use beforeEnter to avoid creating a component and window.location.href to get out of the Vue application.

In Apache .htaccess:

<IfModule mod_alias.c>
  Redirect 404 /404
</IfModule>

This will add a 404 error code to the /404 url.

Then the /404 route from the vue router config will call the Error404 component that you have to define and import like any other Vue component!

This answer is heavily inspired by: https://stackoverflow.com/a/62651493/14217548

Answer 3

Your route definition looks ok, except that I don't know your load function does, i.e. how it resolves to a Vue component. But in general your code follows the common approach as described in the Vue router docs. Usually you won't need a name or an alias here since this route is not used explicitly. Just put in a component that shows your "not found" content and you should be good to go:

{
  path: "*",
  component: PageNotFound
}

Since this is very close to the code you provided, please explain what exactly gives you a problem.