5

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
});
G_Man
  • 1,323
  • 2
  • 21
  • 33
  • 1
    Have you add `mode:'history'` for your router config `/hardware` instead of routing to `#/hardware` ? – SC Kim Jun 09 '20 at 15:36
  • I do have history mode on, would this be the issue? – G_Man Jun 09 '20 at 15:37
  • Turning off history mode fixes it, just turns the URL into /#/Hardware which is fine. – G_Man Jun 09 '20 at 15:42
  • 1
    Alright i saw your edited `const router`. So the problem may lie on your `base` option. I didn't have issue on my vue-router gh-page of having `/` or not behind my param. Try remove the base option – SC Kim Jun 09 '20 at 15:44
  • That actually works locally but not on Netlify, must be a server configuration problem at this point then? – G_Man Jun 09 '20 at 16:05

3 Answers3

4

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

SC Kim
  • 545
  • 4
  • 14
0

It could be that your browser is adding a trailing slash to giving you "/hardware/" which does not match your route. In the past, I had created an alias to match both routes such as "/hardware" and "/hardware/".

shmallen
  • 13
  • 4
  • I have verified this is not happening. Creating an additional route is not working either. – G_Man Jun 09 '20 at 15:36
0

I faced the same issue nowadays and decided to share my thoughts with the community.

You can easily resolve the bug just by removing mode: "history" from the Router. Then it will be automatically replaced by the hash (#) in your URLs. It's going to work then even if you'll use a direct link in the browser.

However, based on the latest SEO recommendations History mode is more preferable because URLs without # are better tracked by Google.

If you would like to save History mode, you need to enable history mode on your server. I use Express middleware and the solution in my case is next:

const express = require('express');
const history = require('connect-history-api-fallback');
const app = express();

app.use(history());
app.use(express.static('src'));

app.get('/', (req, res) => {
  res.sendFile('src/index.html');
});

app.listen(3000, () => console.log('server started'));
tadvas
  • 131
  • 1
  • 13