1

I am developing a laravel(5.4) application in which i am using vue js(2.0) for SPA, my problem is i want to remove #(hash) from URL.

please suggest me any solution?

This is my HTML

<ul class="category-list">
    <li><router-link to="/testlink.html">Tets Link</router-link></li>
    <li><router-link to="/demotestlink.html">Demo Test LInk</router-link></li>
</ul>

This is my vue js code

export default new VueRouter({
    [
        {
            path: '/testlink.html',
            component:require('./components/demo/Testlink')
        }
    ],
    mode: 'history',
});

and i have made a Testlink.vue file inside components/demo folder in Assets

Note: FYI, I am using vue.js(2.0) in Laravel(5.4) Application

Full Stack Tutorials
  • 165
  • 1
  • 10

1 Answers1

2

From Vue-Router documentation, I found this.

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.

To get rid of the hash, we can use the router's history mode, which leverages the history.pushState API to achieve URL navigation without a page reload:

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

I tried the above and it worked fine for me. For more information read here

Community
  • 1
  • 1
Pradeepb
  • 2,564
  • 3
  • 25
  • 46