Send status code 404 when router doesn't exist

server.js

@@ -76,22 +76,17 @@ export async function createServer(
         render = (await import('./dist/server/entry-server.js')).render
       }
 
-      const [appHtml, appState, preloadLinks, tagMeta, redirectRoute] =
+      const [appHtml, appState, preloadLinks, tagMeta, statusCode] =
         await render(url, manifest, origin)
+      const html = template
+        .replace(`<!--preload-links-->`, preloadLinks)
+        .replace(`<!--app-state-->`, appState)
+        .replace(`<!--head-tags-->`, tagMeta.headTags)
+        .replace(`<!--body-tags-open-->`, tagMeta.bodyTagsOpen)
+        .replace(`<!--body-tags-->`, tagMeta.bodyTags)
+        .replace(makeAppContainer(), makeAppContainer(appHtml))
 
-      if (redirectRoute) {
-        res.redirect(redirectRoute)
-      } else {
-        const html = template
-          .replace(`<!--preload-links-->`, preloadLinks)
-          .replace(`<!--app-state-->`, appState)
-          .replace(`<!--head-tags-->`, tagMeta.headTags)
-          .replace(`<!--body-tags-open-->`, tagMeta.bodyTagsOpen)
-          .replace(`<!--body-tags-->`, tagMeta.bodyTags)
-          .replace(makeAppContainer(), makeAppContainer(appHtml))
-
-        res.status(200).set({ 'Content-Type': 'text/html' }).end(html)
-      }
+      res.status(statusCode).set({ 'Content-Type': 'text/html' }).end(html)
     } catch (e) {
       vite && vite.ssrFixStacktrace(e)
       console.log(e.stack)

src/entry-server.js

@@ -22,11 +22,10 @@ export async function render(url, manifest, originUrl) {
   // @vitejs/plugin-vue injects code into a component's setup() that registers
   // itself on ctx.modules. After the render, ctx.modules would contain all the
   // components that have been instantiated during this render call.
+
   const ctx = {}
-  const initialRoute = router.currentRoute.value.path
   const html = await renderToString(app, ctx)
-  const latestRoute = router.currentRoute.value.path
-  const redirectRoute = initialRoute !== latestRoute && latestRoute
+  const statusCode = router.currentRoute.value.meta?.statusCode || 200
   const headPayload = await renderSSRHead(getActiveHead())
   const renderState = `
   <script>
@@ -37,7 +36,7 @@ export async function render(url, manifest, originUrl) {
   // which we can then use to determine what files need to be preloaded for this
   // request.
   const preloadLinks = renderPreloadLinks(ctx.modules, manifest)
-  return [html, renderState, preloadLinks, headPayload, redirectRoute]
+  return [html, renderState, preloadLinks, headPayload, statusCode]
 }
 
 function renderPreloadLinks(modules, manifest) {

src/modules/httpErrorPages/router/index.js

@@ -5,11 +5,17 @@ export default [
   {
     path: '/500',
     name: 'httpError500',
-    component: internalError
+    component: internalError,
+    meta: {
+      statusCode: 500
+    }
   },
   {
     path: '/:pathMatch(.*)*',
-    name: 'httpError400',
-    component: notFound
+    name: 'httpError404',
+    component: notFound,
+    meta: {
+      statusCode: 404
+    }
   }
 ]

src/modules/otus/views/Index.vue

@@ -152,7 +152,7 @@ async function loadInitialData() {
 function redirectOnError(error) {
   switch (error?.response?.status) {
     case 404:
-      router.replace({ name: 'httpError400' })
+      router.replace({ name: 'httpError404' })
       break
     case 500:
       router.replace({ name: 'httpError500' })