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 ponents (each contains the main content body for each 'page')

My router:

export default new Router({
  mode: 'history',
  hash: false,
  routes: [
    {
      path: '/',
      name: 'Home',
      ponent: Home
    },
    {
      path: '/gallery',
      name: 'Gallery',
      ponent: Gallery
    },
    {
      path: '/contact',
      name: 'Contact',
      ponent: 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.

/ => /

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 ponents (each contains the main content body for each 'page')

My router:

export default new Router({
  mode: 'history',
  hash: false,
  routes: [
    {
      path: '/',
      name: 'Home',
      ponent: Home
    },
    {
      path: '/gallery',
      name: 'Gallery',
      ponent: Gallery
    },
    {
      path: '/contact',
      name: 'Contact',
      ponent: 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./#/ => https://examplesite./gallery#/

• javascript
• vue.js
• vue-router
• netlify

• You shouldn't need to fall-back to an <a> tag. Try <router-link to="/gallery">? – puddi Commented Nov 16, 2018 at 11:28
• @puddi Unfortunately it doesn't get rendered as an anchor tag, it gets outputted to the page as is and therefore is not even displayed on the page – Matadeleo Commented Nov 16, 2018 at 11:31
• I would double-check that your Vue application is properly useing/including the router library, then, because it sounds like vue-router isn't being picked up properly. – puddi Commented Nov 16, 2018 at 11:34
• @puddi I suspect that the index.html in the document root is outside the scope of the router - using <router-link> in individual ponents works fine – Matadeleo Commented Nov 16, 2018 at 11:45

1 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