VueJS Routing/Navigation issues

Question

Having trouble using VueJS (first time using it)

• I have 90% of my page template in the index.html file in doc root
• I have 3 components (each contains the main content body for each 'page')

My router:

export default new Router({
  mode: 'history',
  hash: false,
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/gallery',
      name: 'Gallery',
      component: Gallery
    },
    {
      path: '/contact',
      name: 'Contact',
      component: Contact
    }
  ]
})

I can't get <router-link :to="{ name: 'Gallery' }">Gallery</router-link> to work - my site doesn't render them as anchor tags in my index.html (I'm probably not understanding how/where Vue can be used there) - so I'm using a standard link e.g. <a class="nav-link" href="/gallery">Gallery</a>

The problem:

While all of this code works fine on my local machine, it doesn't work anywhere that I upload my code to (I would like to have it working on Netlify). Netlify and other sites overwrite my attempts to remove the hash, so my links then link to e.g.

https://examplesite.com/#/ => https://examplesite.com/gallery#/

Answer 1

hash is not a Router option. Try removing this. To use history mode on Netlify, you have to add a _redirects file to your public directory. Add this to the file:

/* / 200 This will make sure that all paths are handled by the vue-router