Entfernen Sie die # Hash von URL bei der Verwendung von Vue.js in Laravel Homestead

Question

Ich habe eine Laravel 5.2 Setup in Homestead laufen und mit Vue.js Router ein SPA zu bauen. Ich versuche, die #hash aus der URL vollständig zu entfernen, die ich weiß, kann getan werden, aber ich erhalte immer Fehler:

ich rewrite ^(.+)$ /index.html last; meiner vhosts-Datei in Homestead hinzugefügt haben:

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; 

    ... 

} 

Wenn Ich starte neu und öffne eine Seite Ich bekomme eine 500 Internal Server Error.

Gibt es irgendetwas, das ich zu den Strecken in Laravel hinzufügen muss?

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

Ich kann es ohne die #hash Arbeit bekommen (oder die modifizierten Hosts-Datei) bei der Navigation um, aber nicht, wenn ich eine Seite neu zu laden.

Answer 1

Ich habe es geschafft, eine Lösung zu finden, über Matt Stauffer Demo-Anwendung. Zunächst müssen Sie die vhosts-Datei nicht aktualisieren. müssen nur die SPA/Vue.js Route in routes.php aktualisieren:

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

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

Answer 2

Sie müssen den Router-Modus zu html5 RE einzustellen: http://vuejs.github.io/vue-router/en/api/properties.html

So Ihren neuen Code wäre wie:

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

Answer 3

Laravel Router

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

Und natürlich die Vue.js Router wie so initialisieren

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

Vue-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' 
}) 

Answer 4

Sie können Vue Router und Laravel Router machen, indem sie die folgenden Änderungen gut zusammen arbeiten:

Am Ende Ihrer routes/web.php die nächsten Zeilen hinzufügen:

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

Sie müssen Fügen Sie dies am Ende der Datei hinzu, da Sie die zuvor deklarierten Laravel-Routen beibehalten müssen, damit sie ordnungsgemäß funktionieren und nicht von den Pfaden der 404-Seite oder des Vue-Routers überschrieben werden.

In Ihrem Vue Router-config die folgenden:

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 

Wenn jedoch zwischen Laravel und vue-Router navigieren, müssen Sie im Auge behalten, dass vue-Router-Seite einer Laravel Seite verlassen Sie verwenden müssen, ein window.location.href Code, ein <a> Tag oder eine Art von programmatic navigation, um Vue-Router-Instanz vollständig zu beenden.

Getestet diese mit Laravel 5.5.23, Vue 2.5.9, Vue-Router 3.0.1