Remove # hash from URL when using Vue.js in Laravel Homestead

Question

I have a Laravel 5.2 installation running in Homestead and using the Vue.js router to create a SPA. I am trying to completely remove #hash from a URL that I know can be executed, but I keep getting errors:

I added rewrite ^(.+)$ /index.html last; to my vhosts file in Homestead:

 server { listen 80; listen 443 ssl; server_name app.myproject.dev; root "/home/vagrant/Code/vibecast/app.myproject.com/public"; rewrite ^(.+)$ /index.html last; index index.html index.htm index.php; charset utf-8; ... } 

When I restart and open the page, I get 500 Internal Server Error .

Is there anything I need to add to the routes in Laravel?

 var router = new VueRouter({ hashbang: false, history: true, linkActiveClass: "active" }) 

I can make it work without #hash (or the changed hosts file) when navigating through it, but it fails when the page reloads.

Answer 1

I managed to find a solution through the Matt Stauffer demo application. Firstly, there is no need to update the vhosts file. You just need to update the SPA / Vue.js route in routes.php to:

 Route::get('/{vue?}', ' AppController@spa ')->where('vue', '[\/\w\.-]*'); 

And of course, initialize the Vue.js router as follows:

 const router = new VueRouter({ history: true, hashbang: false, linkActiveClass: 'active' }) router.mode = 'html5' 

Link: https://github.com/mattstauffer/suggestive/blob/master/app/Http/routes.php#L9

Answer 2

You need to set the router mode to html5 RE: http://vuejs.imtqy.com/vue-router/en/api/properties.html

So your new code will look like this:

 var router = new VueRouter({ hashbang: false, history: true, linkActiveClass: "active" }) router.mode = 'html5' 

Answer 3

You can do Vue Router and Laravel Router well together by making the following changes:

At the end of your routes/web.php add the following lines:

 Route::get('{path}', function() { return view('your-vuejs-main-blade'); })->where('path', '.*'); 

You need to add this to the end of the file because you need to save the previously declared laravel routes for proper operation and not be overwritten by 404 or vue-router pages.

In the configuration of your Vue router, use the following:

 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) let router = new Router({ mode: 'history', //removes # (hashtag) from url base: '/', fallback: true, //router should fallback to hash (#) mode when the browser does not support history.pushState routes: [ { path: '*', require('../components/pages/NotFound.vue') }, //... + all your other paths here ] }) export default router 

However, when navigating between laravel and vue-router, you need to keep in mind that when leaving the vue-router page on the laravel page, you must use the window.location.href code, the <a> tag, or some kind of program navigation to exit completely from the Vue-router instance.

Tested with Laravel 5.5.23, Vue 2.5.9, Vue-Router 3.0.1

Answer 4

Laravel Router

 Route::any('{all}', function () { return view('welcome');})->where(['all' => '.*']); 

Viet router

 export default new Router({ routes: [ { path: '/', name: 'Home', component: HomeView }, { path: '/category', name: 'Category', component: CategoryView }, { path: '/topic', name: 'Topci', component: TopicView } ], mode: 'history' })