CODEWITHSUNDEEP
laravelvue.jsvue-router
kibyungski
kibyungski

Reputation: 21

Laravel 5.7 and Vue router mode

I have an application on development phase and I tried adding Vuejs. Now I want to remove the hash # in the URL. In the vue-router instance I added the routes and tried to add the 

<code>mode:history</code>

but it doesn't work. Any Idea on how to solve this? Thanks

Here's my routes

require('./bootstrap');

window.Vue = require('vue');

import VueRouter from 'vue-router'
import Appearance from './components/Appearance/Appearance.vue'
Vue.use(VueRouter)

let routes =  [
    {path: '/appearance', component: Appearance}
]

const router = new VueRouter([
    routes

])


Vue.component('Sidebar', require('./components/_partials/Sidebar.vue'));


const app = new Vue({
   el: '#app',
   router
});

Upvotes: 2

Views: 1332

Answers (2)

AddWeb Solution Pvt Ltd
AddWeb Solution Pvt Ltd

Reputation: 21681

Add hashbang and history in router configuration which will remove # in the URL

Try this:

const router = new VueRouter({
  hashbang: false, // Add this line
  history: true, // Add this line
  routes
})

Upvotes: 0

ottosatto
ottosatto

Reputation: 601

In routes configuration you need to change it to be like this:

const router = new VueRouter([
    mode: 'history', // Add this line
    routes
]);

And in your web routes located in your-app-path/routes/web.php you need to change it to be like this:

Route::get('/{any}', 'AppearanceController@index')->where('any', '.*');

With these base config you will be able to enable the html5 history mode. Now you can navigate to any page and you can even refresh the page where you are and you will still where you are. hope it help.

Upvotes: 4

Related Questions