Vue direct URL is not working, only router-link click

This may be a known Vue routing thing that I am totally missing.

So I have a .vue file that uses the url /hardware. Here is the routing

{
    path: "/hardware",
    name: "Hardware",
    component: () =>
      import(/* webpackChunkName: "hardware" */ "../views/Hardware.vue")
  },

Going to /hardware directly using a link on an external site or typing it in the address bar does not work, gives me Page Not Found. But clicking on this link in my nav bar does work.

<router-link to="/hardware">Hardware</router-link>

Am I missing something super obvious that I missed when I was learning routing? Is this because it is a single page application? Thanks in advance for any help.

Adding that I do have history mode on, wondering if this is the issue?

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});

Solution

Following back from comments to answer (Netlify) Vue-router works locally and not at the hosting/deployment side like Apache/Nginx/Firebase Hosting as:

1) Pretty-URL / Hashbang dilemma in SPA. The server needs to redirect when your Vue project enabled history mode. in apache, just some redirect rules needed to be done via .htaccess similarly, so as most of the hosting services included Netlify (you need to check the routes redirect rules at Netlify there). As server page not found, telling us that your route doesn't have actual files under that specified /route at their side.

Previous thread: Vue Router return 404 when revisit to the url

2) If your project for Multi-page-mode instead of going hashbang SPA, Your Vue Project needed to be configured little bit further: Either via SSR or pre-rendering static files before deployment