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"
}
-
nuxt.js which is Fullstack Vue.js has SRR which can provide 404 SEO optimizations. see stackoverflow.com/a/70399382/1569557shadowbq– shadowbq2023-03-19 14:52:19 +00:00Commented Mar 19, 2023 at 14:52
Add a comment
|
3 Answers
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).
4 Comments
Xerri
Your 2nd way does not return the 404 status code. Do you know of anyway you can do that?
IVO GELOV
The 2nd way intentionally always returns 200 status code. Why do you need a 404 status code ? If you need status 404 - then you can use the 1st method but refer to
/index.html instead of /404.html. An SPA does not need 404 status code because you want to catch the missing route inside Vue Router - not by the web server.Xerri
I’d like it to return a 404 status code. I’ve done that on the webserver now
IVO GELOV
Well, in this case you don't need any special configuration on the server side - by default it will return 404 for everything (all your routes) except
index.html or any of the other static assets that comprise your Vue application.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
1 Comment
shadowbq
This is an approach as the SPA must fully reload from the server to send a new error. Other approaches can be viewed here: thegray.company/blog/single-page-application-spas-404s-seo
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.