Webpack: Automatically adding "#" in URL and conflicts when using routers.

Created on 16 Mar 2018  路  4Comments  路  Source: vuejs-templates/webpack

I am using this boilerplate and whenever I open localhost server in my browser it automatically adds _"#" Hash in URL_. For example: http://localhost:8080/#/
and whenever I use Vue Router and wants to go any particular URL, it creates issues, by automatically adding "#" in URL. Like this: http://localhost:8080/policy#/

Most helpful comment

add to your routes confog

mode: 'history'

example:

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'yourPath',
      component: yourComponent
    }
  ]
})

All 4 comments

I am using this boilerplate

With which options? did you include Vue-router? the urls you show look simply like urls created when using vue-router with its default hash mode.

and whenever I use Vue Router and wants to go any particular URL, it creates issues, by automatically adding "#" in URL

what issues does it create? What does the router config look like, what does the URL look like that you want to go to, and what goes wrong?

You have to give us a little bit more than 2 sentences to enable us to help you - preferably, runnable code.

He included vue-router because without he wont see the the '#'.

Like this: http://localhost:8080/policy#/

I think he is using links like <a href="http://localhost:8080/policy">Policy</a> to navigate in his app.
Changing it to <a href="/policy">Policy</a> or use router-link components should work properly.

vue-router documentation (history-mode):

The default mode for vue-router is hash mode - it uses the URL hash to simulate a full URL so that the page won't be reloaded when the URL changes.

The url is split by the '#': [ server-request ] # [ in-app-routing ]

The docs provide information how to get rid of the '#', including additional server configuration (which will be required! ).

The issue is unrelated to the webpack template but the default config of the vue-router.

add to your routes confog

mode: 'history'

example:

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'yourPath',
      component: yourComponent
    }
  ]
})

@papirovnyk Thanks that helped!

Was this page helpful?
0 / 5 - 0 ratings