Routing with Express and Vue

Question

I'm making a simple page with an index '/' and 404 to catch errors '/404'.

I have the following in my express app:

// Entry Point
app.use("/", express.static(resolve(__dirname, "client/dist")));

Then this is my router in Vue

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home,
    },
    {
        path: '/404',
        name: 'PageNotFoumd',
        component: () => import('../components/modules/PageNotFound'),
    },
    {
        path: '*',
        redirect: '/404',
    },
];

const router = new VueRouter({
    mode: 'history',
    base: '/',
    routes,
});

So, if I spin up my client side app, and I go to '/13eo31be', it redirects me to '/404' using Vue's router. However, if I build my Vue app and run it through my server (how it normally runs on websites), here is the outcome:

• '/' => '/'
• '/404' => cannot get /404 - should go to '/404'
• '/2323f2f' => cannot get /2323f2f - should go to '/404'

How can I allow express to pass the redirecting stuff to the Vue Router?

Answer 1

Nevermind it was a simple issue.

I simply had to pass '/404' to the same index file as '/'.

app.use("/404", express.static(config.path));