Pound sign on vue router links

Question

Hi how can I remove the pound sign in the router links in vue. I always get a pound sign in every links for example: http://localhost:8080/#/

export default new Router({
  routes: [
    {
      path: '/',
      name: 'SplashScreen',
      component: SplashScreen
    },
    {
      path: '/aboutus',
      name: 'AboutUs',
      component: AboutUs
    },
    {
      path: '/aboutus',
      name: 'Dashboard',
      component: Dashboard
    }
  ]
})

That's the normal behavior, it is the way SPA (single page application) works. The "pound" sign means that the links will not move the application to other page. — Jorge Campos, Aug 07 '18 at 03:03
Possible duplicate of [How to remove hashbang from url?](https://stackoverflow.com/questions/34623833/how-to-remove-hashbang-from-url) — Aritz, Jul 23 '19 at 08:06

Niklesh Raut · Accepted Answer · 2018-08-07T05:35:32.570

11

use mode as history

 const router = new VueRouter({
   mode: 'history',
   routes: [...]
 })

Also need server configuration Apache

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

check more details here

edited Aug 07 '18 at 05:35

answered Aug 07 '18 at 03:35

Niklesh Raut

34,013
16
75
109

Worth noting that this requires server-side configuration to work correctly – Phil Aug 07 '18 at 03:47
1

I know but sometimes people don't follow links in answers ;-) – Phil Aug 07 '18 at 04:40
Thanks for this. I had deployed my vuejs app on heroku already and later changed the mode to history so I can get rid of the pound sign but I'm not sure how to override this server setting on heroku. The doc suggested using .htaccess or apache_app.conf but none of those work I still get 404 when redirecting to other pages. A nudge in the right direction will be highly appreciated – fokosun Jan 11 '21 at 20:52

Pound sign on vue router links

1 Answers1